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. 尝试尽可能使用跨度作为文本值，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始终是唯一的。