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

Question

当我只是放入一个数量时，一切都会按预期进行，并将.value舍入为2个小数位，但是当我在下拉选择器中选择一个选项让let说6 Piece $ 7.99时，它不再将.value显示为2小数位。选择机翼数量选项时，谁能帮助我使“税金”和“总计”的值显示2个小数位？

我已经尝试在脚本的.toFixed(2)函数中将total添加到tax.value和update()中。

<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

您似乎忘记了在更新功能中也使用.toFixed(2)，即

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

您可以极大地简化代码。请注意，给变量起适当的名称而不是“ a，b，c ..”可以使事情更容易理解，并且在您试图弄清事情为什么不起作用时将为您提供很多帮助。

此外，您真的想用let（如果值以后可能会更改）或const（如果值永远不会更改）声明变量。请注意，每次调用update()时，都会重新创建那里的const变量，因为它们的作用域在函数内部。它们所保存的值永远不会在函数中更改，因此可以为const。

如果不使用let或const，则将创建全局变量，这将导致很多问题。

// 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>