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所得税计算器

回答

相关问题