I는 n 개의 입력 필드에서 값을 추가하려고 자바 스크립트

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; 

편집이 연산을 찾는 경우

추가 그것의 인덱스를 참조 할 필요가 이 값은 숫자로 변환해야합니다. 당신은 Unary plus 연산자 사용할 수 있습니다

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

JSFIDDLE