JS : 루프

Question

를 들어 내가 스팬 태그 내에서 다음과 같은 값을 가지고있는 스팬 값의 합계 : JS에서

<div id="aantallen"> 
<span>3</span> 
<span>2</span> 
</div> 

나는 이러한 값의 합계를 얻을 싶어요. 그래서 다음 For Loop를 만들었습니다 :

var div = document.getElementById("aantallen"); 
var spans = div.getElementsByTagName("span"); 
for(i=0;i<spans.length;i++) 
{ 
    var totaalPersonen = totaalPersonen + i; 
    alert(totaalPersonen); 
} 

그러나 3과 2는 텍스트이므로 경고에서 Nan을 얻습니다. 내 질문 : 어떻게 3과 2를 문자열로 변환하여 이러한 값의 합계를 만들 수 있습니까?

나는 String (i)으로 시도했다. 그러나 그것을 작동시키지 못했습니다.

도움 주셔서 감사합니다.

Answer 1

당신은 Number에 DOM 요소의 내용을 변환해야합니다. 그런 다음 합계를 계산하려면 reduce을 사용할 수 있습니다.

const spans = document.querySelectorAll('#aantallen span'); 
 

 
const result = Array.from(spans).reduce((sum, spanElm) => sum + Number(spanElm.textContent), 0) 
 

 
console.log(result);

<div id="aantallen"> 
 
    <span>3</span> 
 
    <span>2</span> 
 
</div>

마법처럼

Answer 2

은 자바 스크립트 사용에 int로 문자열을 변환하려면

에서는 parseInt (totaalPersonen);

Answer 3

모든 루프에서 var totaalPersonen = totaalPersonen + i;을 다시 연결할 수 있습니다. 그래서 당신은 당신은 내가 innerHTML를 사용한 스팬 내부의 텍스트를 추가하고자하는 가정이 을 시도 totaalPersonen = totaalPersonen + 1;하거나 totaalPerseonen++;

Answer 4

처럼 카운트 업이 var totaalPersonen = 0; 같은 루프 내부의 루프 외부 totaalPersonen를 초기화해야하고, 아닙니다 i. 또한 totaalPersonen 변수는 for 루프 외부에서 선언해야합니다. 그렇지 않으면 매번 다시 초기화됩니다.

var div = document.getElementById("aantallen"); 
var spans = div.getElementsByTagName("span"); 
console.log(spans); 
var totaalPersonen = 0; 
for(i=0;i<spans.length;i++) 
{ 
    alert(parseInt(spans[i].innerHTML)); 
    totaalPersonen = parseInt(totaalPersonen) + parseInt(spans[i].innerHTML); 
    //alert(totaalPersonen); 
} 
alert(totaalPersonen);