如何将总计和税额四舍五入到小数点后两位？

Question

When I just put in a quantity everything works as it should and rounds the .values to 2 decimal places but when I select a option in my drop down selector for lets says 6 Piece $7.99 it no longer displays the .value as 2 decimal places. Can anyone help me make my values for Tax and Total display 2 decimal places when a option is selected for a wing count?

I've already tried to add .toFixed(2) to the total and tax.value in my update() function in my script.

<table>
<tr style="background-color:black; color:white" >
    <th>Menu Item</th>
    <th>Quantity</th>
    <th>Price</th>
    <th>Preferance</th>
</tr>
<tr>
    <td>Boneless Chicken Wings</td>
    <td><input type="text" value="" name="QTY" id="QTY" onKeyUp="multiply()" /></td>
    <td><input type="text" name="PPRICE" id="PPRICE" value="5.99" disabled="disabled" readonly/></td>
    </td>
    <td>
        <form action="/action_page.php">
            <select id="BONELESS_COUNT" onkeyup="update()" onchange="update()">
            <option value="0.00" name="4PCBL" id="4PCBL">4 Piece $5.99</option>
            <option value="2.00" name="6PCBL" id="6PCBL">6 Piece $7.99</option>
            <option value="4.00" name="12PCBL" id="12PCBL">12 Piece $9.99</option>
            </select>
            <select name="Preparation">
            <option value="Baked">Baked</option>
            <option value="Fried">Fried</option>
            </select>
            <select name="Flavor">
            <option>Original</option>
            <option>Buffalo</option>
            <option>Parmesian</option>
            <option>Lemon Pepper</option>
            <option>BBQ</option>
            </select>

        </form>
    </td>
</tr>
    <tr>
    <td></td>
    <td><input type="text" name="4PCBLM" id="4PCBLM" value="1" disabled="disabled" style="display:none"readonly/></td>
    <td><input type="text" name="6PCBLM" id="6PCBLM" value="1" disabled="disabled" style="display:none"readonly/></td>
    <td><input type="text" name="12PCBLM" id="12PCBLM" value="1" disabled="disabled" style="display:none"readonly/></td>
    <td><input type="text" name="TAXDIV" id="TAXDIV" value="100" disabled="disabled" style="display:none"readonly/></td>
</tr>
<tr>
    <td></td>
    <td align="right"><strong>Subtotal $</strong></td>
    <td><input type="text" name="SUBTOTAL" id="SUBTOTAL"></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td align="right" style="display:none"><strong>Salestax</strong></td>
    <td><input type="text"name="SALESTAX" id="SALESTAX" value="11" disabled="disabled"  style="display:none" readonly/></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td align="right"><strong>Tax $</strong></td>
    <td><input type="text" name="TAX" id="TAX" /></td>
    <td></td>
</tr>
    <td></td>
    <td></td>
<tr>     
    <td></td>
    <td align="right"><strong>Total $</strong></td>
    <td><input type="text" name="TOTAL" id="TOTAL"></td>
    <td></td>
</tr>

function multiply() {
    a = Number(document.getElementById('QTY').value);
    b = Number(document.getElementById('PPRICE').value);
    c = Number(document.getElementById('4PCBL').value);
    d = Number(document.getElementById('4PCBLM').value);
    e = Number(document.getElementById('6PCBL').value);
    f = Number(document.getElementById('6PCBLM').value);
    g = Number(document.getElementById('12PCBL').value);
    h = Number(document.getElementById('12PCBLM').value);

    i = a * b;
    j = Number(document.getElementById('SALESTAX').value);
    k = i * j;
    l = Number(document.getElementById('TAXDIV').value);
    m = k / l;
    n = i + m;


    document.getElementById('SUBTOTAL').value = i.toFixed(2);
    document.getElementById('TAX').value = m.toFixed(2);
    document.getElementById('TOTAL').value = n.toFixed(2);
}

function update() {
  var pprice    = document.getElementById("PPRICE")
  var subtotal  = document.getElementById("SUBTOTAL")
  var tax       = document.getElementById("TAX")
  var total  = document.getElementById("TOTAL")
  qty    = document.getElementById("QTY")
  choice = document.getElementById("BONELESS_COUNT")
  pprice.value = b + (choice.options[choice.selectedIndex].value * QTY.value)
  subtotal.value = i + (choice.options[choice.selectedIndex].value * QTY.value)
  tax.value = (subtotal.value * j) / l
  total.value = (b + (choice.options[choice.selectedIndex].value * QTY.value)) * j / l + (b + (choice.options[choice.selectedIndex].value * QTY.value))
}

Answer 1

It looks like you forgot to also use .toFixed(2) in your update function, ie

tax.value = ((subtotal.value * j) / l).toFixed(2)
total.value = ((b + (choice.options[choice.selectedIndex].value * QTY.value)) * j / l + (b + (choice.options[choice.selectedIndex].value * QTY.value))).toFixed(2)

Answer 2

You could greatly simplify your code down to just this. Notice that giving variables proper names rather than "a, b, c.." makes things much easier to understand and will help you a lot when you're trying to figure out why things aren't working.

Also, you really want to declare variables with let (if the value may change later), or const (if the value will never change). Note that each time update() gets called, the const variables there get recreated since they are scoped inside of the function. The values they hold never get changed within the function, so they can be const .

Without using let or const you are creating global variables which will cause you a lot of problems.

 // I am prepending $ to variable names to remind me that these are HTML elements const $qty = document.getElementById("QTY"); const $choice = document.getElementById("BONELESS_COUNT"); const $subtotal = document.getElementById("SUBTOTAL"); const $pprice = document.getElementById("PPRICE"); const $tax = document.getElementById("TAX"); const $total = document.getElementById("TOTAL"); const salesTaxRate = Number(document.getElementById("SALESTAX").value) / 100; function update() { const qty = Number($qty.value); const meal_price = Number($choice.options[$choice.selectedIndex].value); const subtotal = qty * meal_price; const tax = subtotal * salesTaxRate; const total = subtotal + tax; $subtotal.value = subtotal.toFixed(2); $pprice.value = subtotal.toFixed(2); $tax.value = tax.toFixed(2); $total.value = total.toFixed(2); } 

 <table> <tr style="background-color:black; color:white"> <th>Menu Item</th> <th>Quantity</th> <th>Price</th> <th>Preference</th> </tr> <tr> <td>Boneless Chicken Wings</td> <td><input type="text" value="" name="QTY" id="QTY" onKeyUp="update()" /></td> <td><input type="text" name="PPRICE" id="PPRICE" value="" disabled="disabled" readonly/></td> </td> <td> <form action="/action_page.php"> <select id="BONELESS_COUNT" onkeyup="update()" onchange="update()"> <option value="5.99" name="4PCBL" id="4PCBL">4 Piece $5.99</option> <option value="7.99" name="6PCBL" id="6PCBL">6 Piece $7.99</option> <option value="9.99" name="12PCBL" id="12PCBL">12 Piece $9.99</option> </select> <select name="Preparation"> <option value="Baked">Baked</option> <option value="Fried">Fried</option> </select> <select name="Flavor"> <option>Original</option> <option>Buffalo</option> <option>Parmesian</option> <option>Lemon Pepper</option> <option>BBQ</option> </select> </form> </td> </tr> <tr> <!-- not sure what this is for? --> <td></td> <td><input type="text" name="4PCBLM" id="4PCBLM" value="1" disabled="disabled" style="display:none" readonly/></td> <td><input type="text" name="6PCBLM" id="6PCBLM" value="1" disabled="disabled" style="display:none" readonly/></td> <td><input type="text" name="12PCBLM" id="12PCBLM" value="1" disabled="disabled" style="display:none" readonly/></td> </tr> <tr> <td></td> <td align="right"><strong>Subtotal $</strong></td> <td><input type="text" name="SUBTOTAL" id="SUBTOTAL"></td> <td></td> </tr> <tr> <td></td> <td align="right" style="display:none"><strong>Salestax</strong></td> <!-- you could just put this directly in your code --> <td><input type="text" name="SALESTAX" id="SALESTAX" value="11" disabled="disabled" style="display:none" readonly/></td> <td></td> </tr> <tr> <td></td> <td align="right"><strong>Tax $</strong></td> <td><input type="text" name="TAX" id="TAX" /></td> <td></td> </tr> <td></td> <td></td> <tr> <td></td> <td align="right"><strong>Total $</strong></td> <td><input type="text" name="TOTAL" id="TOTAL"></td> <td></td> </tr>