我找不到为什么这个简单的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/

PS请记住，您的代码是错误组织的））

Answer 3

1）您不回写值。 Maxim和Balexandre已经展示了方法。

2） total是一个字符串与一个数字的连接，该数字又导致一个字符串。 Maxim和Balexandre尚未解决此问题。

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

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

在您的代码中，如上所述存在计算total时的问题。 对于salesTax不会发生此问题，因为salesTax您应用的数学运算，字符串将自动转换。

希望这可以帮助。

Answer 4

已更新，已完全正常运行，总代码已修复将整数作为字符串传递（串联）的问题。

添加了代码 ，

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

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

感谢TJH，Balexandre，Maxim和Patrick :)