Holen Werte von Eingaben sie dann hinzufügen, JavaScript

Question

Ich versuche, Werte von n Eingabefeld hinzuzufügen, aber ich Ergebnis wie NaN Wohin gehe ich falsch

<table> 
<tr> 
<td><input class="one" name="" value="1" type="text"></td> 
<td><input class="two" name="" value="2" type="text"></td> 
<td><input class="three" name="" value="3" type="text"></td> 
<td><input class="four" name="" value="4" type="text"></td> 
<td class="total"> </td> 
</tr> 
</table> 


<script> 
var tdsOne = document.getElementsByClassName("one").value; 
var tdsTwo = document.getElementsByClassName("two").value; 
var tdsThree = document.getElementsByClassName("three").value; 
var tdsFour = document.getElementsByClassName("four").value; 

var sum = 0; 
sum += tdsOne + tdsTwo + tdsThree + tdsFour; 

console.log(sum);  
document.getElementsByClassName('total')[0].textContent = sum; 

</script> 

Answer 1

Da document.getElementsByClassName ist ein Array-ähnliches Objekt, müssen Sie es durch seinen Index

var tdsOne = document.getElementsByClassName("one")[0].value; 
var tdsTwo = document.getElementsByClassName("two")[0].value; 
var tdsThree = document.getElementsByClassName("three")[0].value; 
var tdsFour = document.getElementsByClassName("four")[0].value; 

EDIT

Wenn Sie für die Arithmetik der Suche sind zu beziehen hinzufügen Diese Werte müssen in Zahl konvertiert werden. Sie können Unary plus Operator

sum += +tdsOne + +tdsTwo + +tdsThree + +tdsFour; 

JSFIDDLE