Javascript 如何使用Javascript从输入框值中获取总和？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13540751/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-24 12:19:00 来源:igfitidea点击:
How get total sum from input box values using Javascript?
提问by Swapnil Bhavsar
I am not perfect in Javascript.. I want to show total sum of values entered in qty input boxes in next input box named total without refreshing page. Can anyone will help me to figure it out..?
我在 Javascript 中并不完美。我想在名为 total 的下一个输入框中显示在 qty 输入框中输入的值的总和，而无需刷新页面。谁能帮我弄清楚..？
Here is javascript
这是javascript
<script type="text/javascript">
var howmanytoadd = 2;
var rows;
function calc() {
var tot = 0;
for (var i = 0; i < rows.length; i++) {
var linetot = 0;
rows[i].getElementsByTagName('input')[howmanytoadd].value = linetot;
tot += linetot;
}
document.getElementById('total').value = tot
}
onload = function () {
rows = document.getElementById('tab').getElementById('qty1');
for (var i = 0; i < rows.length; i++) {
rows.getElementsByTagName('input')[i].onkeyup = calc;
}
}
</script>
Here is my html code:
这是我的 html 代码：
Qty1 : <input type="text" name="qty1" id="qty"/><br>
Qty2 : <input type="text" name="qty2" id="qty"/><br>
Qty3 : <input type="text" name="qty3" id="qty"/><br>
Qty4 : <input type="text" name="qty4" id="qty"/><br>
Qty5 : <input type="text" name="qty5" id="qty"/><br>
Qty6 : <input type="text" name="qty6" id="qty"/><br>
Qty7 : <input type="text" name="qty7" id="qty"/><br>
Qty8 : <input type="text" name="qty8" id="qty"/><br>
<br><br>
Total : <input type="text" name="total" id="total"/>
here is screen shot
这是屏幕截图
回答by Akhil Sekharan
Try:
尝试：
Qty1 : <input onblur="findTotal()" type="text" name="qty" id="qty1"/><br>
Qty2 : <input onblur="findTotal()" type="text" name="qty" id="qty2"/><br>
Qty3 : <input onblur="findTotal()" type="text" name="qty" id="qty3"/><br>
Qty4 : <input onblur="findTotal()" type="text" name="qty" id="qty4"/><br>
Qty5 : <input onblur="findTotal()" type="text" name="qty" id="qty5"/><br>
Qty6 : <input onblur="findTotal()" type="text" name="qty" id="qty6"/><br>
Qty7 : <input onblur="findTotal()" type="text" name="qty" id="qty7"/><br>
Qty8 : <input onblur="findTotal()" type="text" name="qty" id="qty8"/><br>
<br><br>
Total : <input type="text" name="total" id="total"/>
<script type="text/javascript">
function findTotal(){
var arr = document.getElementsByName('qty');
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('total').value = tot;
}
</script>
回答by Waruna Manjula
$(document).ready(function(){
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function() {
$(this).keyup(function(){
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").html(sum.toFixed(2));
}body {
font-family: sans-serif;
}
#summation {
font-size: 18px;
font-weight: bold;
color:#174C68;
}
.txt {
background-color: #FEFFB0;
font-weight: bold;
text-align: right;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
<tr>
<td width="40px">1</td>
<td>Butter</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr>
<td>2</td>
<td>Cheese</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr>
<td>3</td>
<td>Eggs</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr>
<td>4</td>
<td>Milk</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr>
<td>5</td>
<td>Bread</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr>
<td>6</td>
<td>Soap</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr id="summation">
<td> </td>
<td align="right">Sum :</td>
<td align="center"><span id="sum">0</span></td>
</tr>
</table>回答by Burlak Ilia
Javascript:
Javascript：
window.sumInputs = function() {
var inputs = document.getElementsByTagName('input'),
result = document.getElementById('total'),
sum = 0;
for(var i=0; i<inputs.length; i++) {
var ip = inputs[i];
if (ip.name && ip.name.indexOf("total") < 0) {
sum += parseInt(ip.value) || 0;
}
}
result.value = sum;
}?
Html:
网址：
Qty1 : <input type="text" name="qty1" id="qty"/><br>
Qty2 : <input type="text" name="qty2" id="qty"/><br>
Qty3 : <input type="text" name="qty3" id="qty"/><br>
Qty4 : <input type="text" name="qty4" id="qty"/><br>
Qty5 : <input type="text" name="qty5" id="qty"/><br>
Qty6 : <input type="text" name="qty6" id="qty"/><br
Qty7 : <input type="text" name="qty7" id="qty"/><br>
Qty8 : <input type="text" name="qty8" id="qty"/><br>
<br><br>
Total : <input type="text" name="total" id="total"/>
<a href="javascript:sumInputs()">Sum</a>
Example: http://jsfiddle.net/fRd9N/1/
示例：http: //jsfiddle.net/fRd9N/1/
?
?
回答by Frankie
To sum with decimal use this:
用十进制求和使用这个：
In the javascript change parseInt with parseFloat and add this line tot.toFixed(2); for this result:
在 javascript 中用 parseFloat 更改 parseInt 并添加这一行 tot.toFixed(2); 对于这个结果：
function findTotal(){
var arr = document.getElementsByName('qty');
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseFloat(arr[i].value))
tot += parseFloat(arr[i].value);
}
document.getElementById('total').value = tot;
tot.toFixed(2);
}
Use step=".01" min="0" type="number" in the input filed
在输入字段中使用 step=".01" min="0" type="number"
Qty1 : <input onblur="findTotal()" step=".01" min="0" type="number" name="qty" id="qty1"/><br>
Qty2 : <input onblur="findTotal()" step=".01" min="0" type="number" name="qty" id="qty2"/><br>
Qty3 : <input onblur="findTotal()" step=".01" min="0" type="number" name="qty" id="qty3"/><br>
Qty4 : <input onblur="findTotal()" step=".01" min="0" type="number" name="qty" id="qty4"/><br>
Qty5 : <input onblur="findTotal()" step=".01" min="0" type="number" name="qty" id="qty5"/><br>
Qty6 : <input onblur="findTotal()" step=".01" min="0" type="number" name="qty" id="qty6"/><br>
Qty7 : <input onblur="findTotal()" step=".01" min="0" type="number" name="qty" id="qty7"/><br>
Qty8 : <input onblur="findTotal()" step=".01" min="0" type="number" name="qty" id="qty8"/><br>
<br><br>
Total : <input type="number" step=".01" min="0" name="total" id="total"/>
回答by Anonymous
Here's a simpler solution using what Akhil Sekharan has provided but with a little change.
这是一个使用 Akhil Sekharan 提供的更简单的解决方案，但稍作改动。
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i += 1) {
if(parseInt(inputs[i].value)){
inputs[i].value = '';
}
}????
document.getElementById('total').value = total;
回答by Xenon
I need to sum the span elements so I edited Akhil Sekharan's answer below.
我需要总结跨度元素，所以我在下面编辑了 Akhil Sekharan 的答案。
var arr = document.querySelectorAll('span[id^="score"]');
var total=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].innerHTML))
total+= parseInt(arr[i].innerHTML);
}
console.log(total)
You can change the elements with other elements link will guide you with editing.
您可以使用其他元素更改元素链接将指导您进行编辑。
回答by sohel khalifa
Try this:
尝试这个：
function add()
{
var sum = 0;
var inputs = document.getElementsByTagName("input");
for(i = 0; i <= inputs.length; i++)
{
if( inputs[i].name == 'qty'+i)
{
sum += parseInt(input[i].value);
}
}
console.log(sum)
}
