<!DOCTYPE html>
<html>
<body>
<form name="TESTING">
<h1>Menu</h1>
<fieldset style="width:240px">
<legend>Side order</legend>
<table>
<thead>
<tr>
<td></td>
<td>Qty</td>
<td>Price</td>
<td>Total</td>
</tr>
</thead>
<tr>
<td>Chicken Wings</td>\
<td><input type="number" name="a" id="input" value="0" onchange="calculate();"/></td>
<td> 2.50</td>
<td><output type="number" name="x" id="output"></output></td>
</tr>
<tr>
<td>Spaghetti</td>
<td><input type="number" name="b" id="input" value="0" onchange="calculate();"/></td>
<td> 8</td>
<td><output type="number" name="y" id="output"></output></td>
</tr>
<tr>
<td>Garlic Bread</td>
<td><input type="number" name="c" id="input" value="0" onchange="calculate();"/></td>
<td> 2</td>
<td><output type="number" name="z" id="output"></output></td>
</tr>
</table>
</fieldset>
<fieldset style="width:240px">
<legend>Drink order</legend>
<table>
<thead>
<tr>
<td></td>
<td>Qty</td>
<td>Price</td>
<td>Total</td>
</tr>
</thead>
<tr>
<td>Coke</td>\
<td><input type="number" name="d" id="input" value="0" onchange="calculate();"/></td>
<td> 2</td>
<td><output type="number" name="e" id="output"></output></td>
</tr>
<tr>
<td>Mineral Water</td>
<td><input type="number" name="f" id="input" value="0" onchange="calculate();"/></td>
<td> 1.50</td>
<td><output type="number" name="g" id="output"></output></td>
</tr>
<tr>
<td>Cofee</td>
<td><input type="number" name="h" id="input" value="0" onchange="calculate();"/></td>
<td> 3.50</td>
<td><output type="number" name="i" id="output"></output></td>
</tr>
<tr>
<td>total = </td>
<td><output type="number" name="finaltotal" id="output"></output></td>
</tr>
</table>
</fieldset>
</form>
<script type="text/javascript">
function calculate() {
var USERINPUT1 = document.TESTING.a.value,
RESULT = USERINPUT1* 2.50;
document.TESTING.x.value = RESULT;
var USERINPUT2 = document.TESTING.b.value,
RESULT = USERINPUT2* 8;
document.TESTING.y.value = RESULT;
var USERINPUT3 = document.TESTING.c.value,
RESULT = USERINPUT3* 2;
document.TESTING.z.value = RESULT;
var USERINPUT4 = document.TESTING.d.value,
RESULT = USERINPUT4* 2;
document.TESTING.e.value = RESULT;
var USERINPUT5 = document.TESTING.f.value,
RESULT = USERINPUT5* 1.50;
document.TESTING.g.value = RESULT;
var USERINPUT6 = document.TESTING.h.value,
RESULT = USERINPUT6* 3.50;
document.TESTING.i.value = RESULT;
document.TESTING.finaltotal.value = ((document.TESTING.i.value) + (document.TESTING.g.value) + (document.TESTING.e.value) + (document.TESTING.z.value) + (document.TESTING.y.value) + (document.TESTING.x.value));
}
</script>
</body>
</html>
总有问题......就像000000 ..如果我选择第一项...那么它是000002.5 ...第一次2.5成为最后一个位置......我不知道如何解决这个问题......如果你们知道如何解决请帮助我...我将非常感谢..THANKS。
答案 0 :(得分:1)
您需要为数字转换字符串输入值,否则一元+
运算符就像字符串的cancatenation运算符一样。解决这个问题:
var form = document.TESTING;
form.finaltotal.value = Number(form.i.value) +
Number(form.g.value) +
Number(form.e.value) +
Number(form.z.value) +
Number(form.y.value) +
Number(form.x.value);
请记住,使用value
属性获得的输入值始终是字符串,而不是数字。如果至少有一个操作数是字符串,则+
操作的结果将始终是连接的字符串。