如何显示多个文本字段的总值?

时间:2014-10-20 10:08:07

标签: javascript html

如何在id =“grand”中显示所有id =“total”的总值。这是我的整个代码。只应使用HTML和Javascript。我不知道如何添加每个值。当用户选中该复选框时,将执行javascript。复选框的值将乘以下拉值的值。然后产品将显示在输入id =“total”中。我希望将输入id = total中的所有值加起来并将其显示在输入id =“grand”

<p><center><font size="5">Total Amount: <input type="text" id="grand" name="grand" value="P0.00"></input></p>
<table border=1>
<tr>
<td colspan=3><h2>Specialty Cakes</h2></td>
</tr>
<tr>
<td><center><img src=special\blackforest_small.jpg ><br>Black Forest</td>
<td><input type="checkbox" id="check1" name="check1" value="550.00"onclick="special1()">Buy P550.00</input><br><input type="text" id="total1" name="total1" value="P0.00"size="8"></input><br>
QTY: <select id="qty1" name="qty1" onchange="special1()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td>
</tr>
<tr>
<td><center><img src=special\chocolata_small.jpg><br>Chocolata</center></td>
<td><input type="checkbox" id="check2" name="check2" value="550.00"onclick="special2()">Buy P500.00</input><br><input type="text" id="total2" name="total2" value="P0.00"size="8"></input><br>
QTY: <select id="qty2" name="qty2" onchange="special2()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td>
</tr>
</table>
<script>
function special1(){
var m = document.getElementById("check1").checked;
var x = document.getElementById("check1").value;
var y = document.getElementById("qty1").value;
var z = 0;
if (m == true){
z = "P" + x * y;
}
document.getElementById("total1").value = z;
}
function special2(){
var m = document.getElementById("check2").checked;
var x = document.getElementById("check2").value;
var y = document.getElementById("qty2").value;
var z = 0;
if (m == true){
z = "P" + x * y;
}
document.getElementById("total2").value = z;
}
</script>

2 个答案:

答案 0 :(得分:1)

您需要在计算中添加括号:

z = "P" + ( x * y );
          ^       ^

在这种情况下,您的功能将按预期工作。你现在拥有的是连接。

似乎您需要使用parseFloat函数将这些数字转换为浮点数。如果始终使用substr方法

P开头,请删除第一个字符

所以最后的结果应该是:

z = "P" + ( parseFloat( x.substr( 1 ) ) * parseFloat( y.substr( 1 ) ) ).toFixed( 2 );

toFixed会将您的浮点数格式化为点后总是2个数字。

答案 1 :(得分:0)

在JS +中从左到右工作。但是将字符串添加到其他任何内容都会产生另一个字符串,因此您需要注意操作的顺序。

z = "P" + (x * y);