如何计算数字输入的值？

Question

I have an form and I want the completed numbers to be added together. Nothing has to be done with the text and date input. I want to display the total of numbers in the span element with id "total".

 function myFunction() { var x = document.getElementById("form"); total = 0; var i; for (i = 0; i < x.length ;i++) { total = total + x.elements[i].value; } document.getElementById("demo").innerHTML = total; }

 <form id="form"> <tr> <td><input type="text"></td> <td><input type="number"></td> <td><input type="date"></td> </tr> <tr> <td><input type="text"></td> <td><input type="number"></td> <td><input type="date"></td> </tr> <tr> <td><input type="text"></td> <td><input type="number"></td> <td><input type="date"></td> </tr> </form> </table> </div> <button class="trigger" onclick="myFunction()"> Bereken studietempo </button> <div class="modal"> <div class="modal-content"> <span class="close-button">&times;</span> <p>Je hebt tot nu toe <span id="total"></span> ECTS behaald.</p> <p>Je huidige studietempo is:</p> <p>0 ECTS / maand.</p> <p>Op basis van dit studietempo heb je 15 maanden nodig voor je P</p> </div> </div>

Thankyou!

Answer 1

I want to display the total of numbers in the span element with id "total".

You are trying to add up all the values as Elements x.elements doesn't exclude text and date ,

Use querySelector and reduce

var x = document.getElementById("form");
var total = Array.from( x.querySelectorAll( "[type='number']" ) )
                 .reduce( ( a, c ) => a + ( isNaN( c ) ? 0 + c ), 0 );

I want to display the total of numbers in the span element with id "total".

Now display this total

document.getElementById("total").innerHTML = total;

Answer 2

You need to loop using this for-loop :

for (var i = 0; i < x.elements.length; i++) {...}

Parse the values as follow:

total = total + (isNaN(Number(x.elements[i].value)) ? 0 : Number(x.elements[i].value));

The first input in every TD is type of text , change to number

<td><input type="text"></td>
                 ^

 function myFunction() { var x = document.getElementById("form"); var total = 0; for (var i = 0; i < x.elements.length; i++) { if (x.elements[i].type === 'number') { total += (isNaN(Number(x.elements[i].value)) ? 0 : Number(x.elements[i].value)); } } document.getElementById("demo").innerHTML = total; }

 <table> <form id="form"> <tr> <td><input type="number"></td> <td><input type="number"></td> <td><input type="date"></td> </tr> <tr> <td><input type="number"></td> <td><input type="number"></td> <td><input type="date"></td> </tr> <tr> <td><input type="number"></td> <td><input type="number"></td> <td><input type="date"></td> </tr> </form> </table> <button class="trigger" onclick="myFunction()"> Bereken studietempo </button> <div class="modal"> <div class="modal-content"> <!--span class="close-button">&times;</span> <p>Je hebt tot nu toe <span id="total"></span> ECTS behaald.</p> <p>Je huidige studietempo is:</p> <p>0 ECTS / maand.</p> <p>Op basis van dit studietempo heb je 15 maanden nodig voor je P</p--> </div> </div> <p>Demo</p> <span id="demo"></span>