<!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>The total got problem...it is like 000000..if i choosing the first item...then it is 000002.5...first 2.5 become to the last position...i have no idea how to solve this...if you guys know how to solve please help me...i will very appreciate..THANKS.
You need to cast string input values for numbers, otherwise unary + operator works like cancatenation operator for strings. Fix it something like this:
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);
Remember that input value you get with value property is always a string, not a number. And result of + operation is always a concatenated string again if at least one of the operands is a string.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments