Получить значения из входов затем добавить их, JavaScript

Question

Я пытаюсь добавить значения из п поля ввода, но я получаю результат как NaN Где я буду неправильно

<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

Поскольку document.getElementsByClassName массив-подобный объект, вы должны передать его по его индексу

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

Если вы ищете арифметике добавить Эти значения должны быть преобразованы в число. Вы можете использовать оператор Unary plus

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

JSFIDDLE