当我只是放入一个数量时,一切都像它应该的那样工作,并将.values舍入到2位小数,但当我在下拉选择器中选择一个选项时,它不再将.value显示为2位小数。当选择了机翼计数的选项时,是否有人可以帮助我使Tax和Total的值显示两个小数位?
我已经尝试将.toFixed(2)
添加到total
中,并在脚本的update()
函数中添加tax.value
。
<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))
}
发布于 2018-12-20 02:37:51
看起来你忘了在你的更新函数中使用.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)
发布于 2018-12-20 03:33:25
你可以极大地简化你的代码,就是这样。请注意,为变量指定正确的名称,而不是"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>
https://stackoverflow.com/questions/53856968
复制相似问题