如何使用JavaScript从input框值得到总和？
我不完美的JavaScript ..我想显示在总数的input框中input的数值在下一个input框名称总没有刷新页面。 任何人都可以帮助我弄清楚..？
这里是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> 这是我的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"/>
这里是屏幕截图 
尝试：
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>
使用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>
例如： http : //jsfiddle.net/fRd9N/1/
$(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>
尝试这个：
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) }
我需要总结span元素，所以我编辑了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)
您可以使用其他元素更改元素链接将引导您进行编辑。
