如何解决链接输入类型="数字"的html代码总数

时间:2014-11-08 08:24:40

标签: html

<!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。

1 个答案:

答案 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属性获得的输入值始终是字符串,而不是数字。如果至少有一个操作数是字符串,则+操作的结果将始终是连接的字符串。