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

Question

My HTML is a simple entry form like this:

<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()">

And my JS is 2 simple functions...

    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;

}

I have included a JS Fiddle link for more information as well: http://jsfiddle.net/tjhillard/nkHxe/1/ I want the sales tax and the total to display inside the appropriate fields when the "Calculate" button is clicked.

Thank you in advance for your help!

Answer 1

you just need to update the values back:

change this:

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

into:

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

updated version of your code: http://jsfiddle.net/nkHxe/4/

Answer 2

It should be in the following way:

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 Keep in mind that your code is bad-organized ))

Answer 3

1) You don't write back the values. Maxim and Balexandre already showed how.

2) total is a concatenation of a string with a number which leads to a string again. This has not been solved by Maxim and Balexandre.

By directly reading from the input field, you get strings back. So, parse them first into numbers. Example:

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

In your code, you have the issue when calculating total as explained above. The issue does not occur for salesTax because the strings are automatically converted thanks to the math operations you apply.

Hope this helps.

Answer 4

Updated, Fully Working, total code Fixed where Integers were Passed (Concatenated) as Strings.

Code added ,

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

Link , http://jsfiddle.net/nkHxe/150/

Thanks to TJH, Balexandre, Maxim and Patrick :)