我找不到为什么这个简单的JS不起作用。 （销售税计算器）

Question

我的HTML是一个简单的输入表格，如下所示：

<div id="taxCalc">
    <label for="subtotal">Subtotal:</label>
    <input type="text" id="subtotal" >
    <span id="subtotal_message">Enter order subtotal</span><br />

    <label for="tax_rate">Tax Rate:</label>
    <input type="text" id="tax_rate" >
    <span id="tax_rate_message">Enter sales tax rate (99.9)</span><br />

    <label for="sales_tax">Sales Tax:</label>
    <input type="text" id="sales_tax" disabled ><br />

    <label for="total">Total:</label>
    <input type="text" id="total" disabled ><br />

    <label>&nbsp;</label>
    <input type="button" id="calculate" value="Calculate" onclick="calculate_click()">
    <input type="button" id="clear" value="Clear" onclick="clear_click()">

我的JS是2个简单的函数......

    var subtotal, taxRate, salesTax, total;

function setValues() {
    subtotal = document.getElementById("subtotal").value; 
    taxRate = document.getElementById("tax_rate").value; 
    salesTax = document.getElementById("sales_tax").value;  
    total = document.getElementById("total").value; 
}

function calculate_click() {
    setValues();
    salesTax = subtotal * taxRate / 100;
    total = subtotal + salesTax;

}

我还提供了一个JS Fiddle链接以获取更多信息：http://jsfiddle.net/tjhillard/nkHxe/1/ 我希望在单击“计算”按钮时，销售税和总计显示在相应字段中。

提前感谢您的帮助！

Answer 1

你只需要更新值：

改变这个：

function calculate_click() {
    setValues();
    salesTax = subtotal * taxRate / 100;
    total = subtotal + salesTax;    
}

成：

function calculate_click() {
    setValues();
    salesTax = (subtotal * taxRate) / 100;
    total = subtotal + salesTax;   

    // place the value in the form
    document.getElementById("sales_tax").value = salesTax;
    document.getElementById("total").value = total; 
}

您的代码的更新版本：http://jsfiddle.net/nkHxe/4/

Answer 2

应该采用以下方式：

function calculate_click() {
    setValues();
    salesTax = subtotal * taxRate / 100;
    total = subtotal + salesTax;

    document.getElementById("sales_tax").value = salesTax;
    document.getElementById("total").value = total;
}

http://jsfiddle.net/nkHxe/5/

P.S 请记住，您的代码组织糟糕））

Answer 3

1）你不回写这些值。 Maxim和Balexandre已经展示了如何。

2）total是一个字符串的串联，其中一个数字再次导致一个字符串。 Maxim和Balexandre尚未解决这个问题。

通过直接从输入字段读取，您可以获得字符串。因此，首先将它们解析为数字。例如：

parseInt(document.getElementById("subtotal").value)

在您的代码中，您在计算total时遇到问题，如上所述。 salesTax不会出现此问题，因为由于您应用的数学运算，字符串会自动转换。

希望这有帮助。

Answer 4

已更新，可以正常使用，总代码已修复，其中整数作为字符串传递（串联）。

已添加代码，

subtotal = parseInt(document.getElementById("subtotal").value)
total = parseInt(document.getElementById("total").value)

链接， http://jsfiddle.net/nkHxe/150/

感谢TJH，Balexandre，Maxim和Patrick：）