Javascript所得稅計算器

我希望有人可以快速看看這個，並給我一些關於我做錯了什麼的指針。我試圖按照我在JS Fiddle上找到的小費計算器程序進行操作，直到我嘗試執行計算。Javascript所得稅計算器

任何提示將有所幫助！

謝謝！

的jsfiddle：http://jsfiddle.net/Shibi/pg6hg7hg/63/

HTML：

<form id="calculator" method="post"> 

<div> 
<p><input value="" id="income"></input></p> 

</div> 

<select id="states" onchange="changetax(this)"> 
    <option>Choose state</option> 
    <option value="0.4">Alabama</option> 
    <option value="0">Alaska</option> 
    <option value="0.56">Arizona</option> 
    <option value="0.65">Arkansas</option> 
</select> 
<div id="tax"></div> 
<p><input type="submit" /></p> 
    <hr /> 

<p>Taxed Amount: <div id="tax"></div></p> 
<p>Total: <div id="total"></div></p> 


</form>

JS：

function changetax($this){ 

    $("#tax").text($this.value>0?("Income Tax: " + $this.value + "%") : ""); 
} 

function calculate() { 

var income = $('#income').val(); 
var tax = $('#tax').val(); 
var taxedAmount = income*tax; 
var total = income - taxedAmount; 

} 

$('#calculator').submit(calculate);

來源

2014-09-12 Shibi

我立即看到2個問題。

您的div和您的輸入都有一個「收入」ID，ID應該是唯一的。
你正在對「字符串」進行數學運算，或者用parseInt（）將其解析爲int，或者將值乘以1（val * 1）來獲得一個好數字。

以下是使用（val * 1）和parseInt（）進行非常通用的驗證的示例。

function changetax($this){ 

    $("#tax").text($this.value>0?("Income Tax: " + $this.value + "%") : ""); 
} 

function calculate() { 

var incomestr = $('#income').val(); 
var taxstr = $('#tax').val(); 

// convert values to int 
var income = (incomestr*1);  
var tax = parseInt(taxstr); 

if(income > 0 && tax > 0){  
var taxedAmount = income*tax; 
var total = income - taxedAmount; 
} 

} 

$('#calculator').submit(calculate);

編輯：

好吧，我會離開上面的例子，但這裏是一個什麼你試圖做一個工作的例子。我不得不改變一些事情。

你在2個地方有'稅收'和'收入'ID，我只剩下其中一個。
您正在嘗試使用.val（）div，您可以使用.text（）代替.val（）僅適用於具有值屬性的元素。
您的「所得稅：」字符串在您的「稅收」編號中，而不是數字，我將稅收字段更改爲「徵稅」並將值指向那裏。
您的稅收價值實際上存在於您的'州'ID，所以我更新稅收變量來查看州的價值。
你的小提琴沒有工作，因爲它張貼表單，我刪除了提交，並使其成爲一個事件，因此它可以用於演示。
嘗試在可能的情況下使用文本值的跨度，div是塊元素，將來會遇到佈局問題，但它對此示例沒有影響。

的jsfiddle：http://jsfiddle.net/lookitstony/chn3t025/

HTML：

<div> 
    <p><input value="" id="income"></input></p>  
</div> 

<select id="states" onchange="changetax(this)"> 
    <option>Choose state</option> 
    <option value="0.4">Alabama</option> 
    <option value="0">Alaska</option> 
    <option value="0.56">Arizona</option> 
    <option value="0.65">Arkansas</option> 
</select> 

<div id="tax"></div> 
<p><button id="calculator">Calculate</button></p> 

<hr /> 

<p>Taxed Amount: <span id="taxed"></span></p> 
<p>Total: <span id="total"></span></p>

的Javascript：

function changetax($this){ 

    $("#tax").text($this.value>0?("Income Tax: " + $this.value + "%") : ""); 
} 

function calculate(e) { 
    e.preventDefault(); 

    var income = $('#income').val(); 
    var tax = $('#states').val(); 
    var taxedAmount = income*tax; 
    var total = income - taxedAmount; 
    $('#taxed').text(taxedAmount); 
    $('#total').text(total); 
    return false; 
} 
$(function(){ 
$('#calculator').click(calculate); 
});

差點忘了這一點，我嘗試連接到它在每一個JS問題，我回答，因爲它使對我的JS技能有重大影響。這裏有一些設計模式可以挽救你的生命。 http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript

來源

2014-09-12 18:04:44 Tony

感謝您的反饋！請您詳細說明我將如何去使用parseInt（）或（val * 1）這些特定的變量？ – Shibi 2014-09-12 18:13:33

@Shibi，我已經更新了答案。使用加法時，真正可以看到不轉換和確保它們是整數的大問題。它會連接你的數字而不是添加它們，但是我仍然希望在對用戶輸入執行數學操作之前驗證我正在處理一個數字。你也可以找到這個插件有幫助，我做。 http://www.decorplanit.com/plugin/ – Tony 2014-09-12 18:24:01

謝謝這真的很有幫助，我一定會看看那個插件。我做了你所說的，我仍然以某種方式得到一個禁止（403） CSRF驗證失敗錯誤。任何想法爲什麼？其他一切似乎都很好。 http://jsfiddle.net/Shibi/pg6hg7hg/63/ – Shibi 2014-09-12 18:33:05

脫穎而出對我的第一件事情是，你必須使用相同的id屬性的多個元素;這將意味着當您執行$('#income').val()之類的操作時，您可能會選擇帶有該ID的div而不是輸入，這正是您想要的。

確保ID始終是唯一的。

來源

2014-09-12 18:02:39 Jacob

Javascript所得稅計算器

回答

相關問題