如何使用Javascript從輸入框值中獲取總和？

Question

我並不完美的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> 

這裏是我的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"/> 

這裏是截屏

Answer 1

嘗試：

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> 

Answer 2

試試這個：

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) 

} 

Answer 3

的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/

Answer 4

我需要總結的span元素，所以我編輯阿克hil 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) 

您可以使用其他元素更改元素鏈接將引導您進行編輯。

https://www.w3.org/TR/css3-selectors/#attribute-substrings

Answer 5

$(document).ready(function(){ 
 

 
\t \t //iterate through each textboxes and add keyup 
 
\t \t //handler to trigger sum event 
 
\t \t $(".txt").each(function() { 
 

 
\t \t \t $(this).keyup(function(){ 
 
\t \t \t \t calculateSum(); 
 
\t \t \t }); 
 
\t \t }); 
 

 
\t }); 
 

 
\t function calculateSum() { 
 

 
\t \t var sum = 0; 
 
\t \t //iterate through each textboxes and add the values 
 
\t \t $(".txt").each(function() { 
 

 
\t \t \t //add only if the value is number 
 
\t \t \t if(!isNaN(this.value) && this.value.length!=0) { 
 
\t \t \t \t sum += parseFloat(this.value); 
 
\t \t \t } 
 

 
\t \t }); 
 
\t \t //.toFixed() method will roundoff the final sum to 2 decimal places 
 
\t \t $("#sum").html(sum.toFixed(2)); 
 
\t }

body { 
 
\t \t \t \t font-family: sans-serif; 
 
\t \t \t } 
 
\t \t \t #summation { 
 
\t \t \t \t font-size: 18px; 
 
\t \t \t \t font-weight: bold; 
 
\t \t \t \t color:#174C68; 
 
\t \t \t } 
 
\t \t \t .txt { 
 
\t \t \t \t background-color: #FEFFB0; 
 
\t \t \t \t font-weight: bold; 
 
\t \t \t \t text-align: right; 
 
\t \t \t }

<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"> 
 
\t <tr> 
 
\t \t <td width="40px">1</td> 
 
\t \t <td>Butter</td> 
 
\t \t <td><input class="txt" type="text" name="txt"/></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td>2</td> 
 
\t \t <td>Cheese</td> 
 
\t \t <td><input class="txt" type="text" name="txt"/></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td>3</td> 
 
\t \t <td>Eggs</td> 
 
\t \t <td><input class="txt" type="text" name="txt"/></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td>4</td> 
 
\t \t <td>Milk</td> 
 
\t \t <td><input class="txt" type="text" name="txt"/></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td>5</td> 
 
\t \t <td>Bread</td> 
 
\t \t <td><input class="txt" type="text" name="txt"/></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td>6</td> 
 
\t \t <td>Soap</td> 
 
\t \t <td><input class="txt" type="text" name="txt"/></td> 
 
\t </tr> 
 
\t <tr id="summation"> 
 
\t \t <td>&nbsp;</td> 
 
\t \t <td align="right">Sum :</td> 
 
\t \t <td align="center"><span id="sum">0</span></td> 
 
\t </tr> 
 
</table>