Javascript所得税计算器

Question

我希望有人可以快速浏览一下，并为我做错事情提供一些指导。 我尝试遵循我在JS Fiddle上找到的小费计算器程序，并且在尝试执行计算的过程中一直有效。

任何提示都将有所帮助！

谢谢！

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 );

Answer 1

我立即看到2个问题。

1. 您的div和输入都具有ID“收入”，该ID应该是唯一的。
2. 您正在对“字符串”进行数学运算，或者使用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 );

编辑：

好的，我将离开上面的示例，但这是您尝试执行的工作示例。 我不得不改变一些事情。

1. 您在2个地方有“税”和“收入” ID，我只留下了一个。
2. 您尝试使用.val（）div时，可以改用.text（），. val（）仅适用于具有value属性的元素。
3. 您的“收入税：..”字符串位于您的“税” id（不是数字）中，我将税字段更改为“征税”，并在其中指出了价值。
4. 您的税额实际上存在于您的“州” ID上，因此我更新了税额变量以查看州值。
5. 您的小提琴没有按其张贴表单的方式工作，我删除了提交并使其成为一个事件，以便可以进行演示。
6. 尝试在可能的情况下为文本值使用spans，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

Answer 2

对我而言，第一件事是您有多个具有相同id属性的元素； 这意味着，当您执行诸如$('#income').val() ，您可能会选择具有该ID的div而不是您想要的输入。

确保ID始终是唯一的。