getElementsByClassName의 카운트 다운 오류

Question

getElementsByClassName을 사용하는 중에 오류가 발생했지만 내 수업에 원하는 결과를 표시하지 못합니다. 클래스와 원활하게 작동하는 getElementbyID을 사용할 때 결과가 표시되지 않는 이유를 알 수없는 콘솔에 오류가 없습니다. fiddle

Answer 1

getElementsByClassName 선택한 DOM 요소 객체의 배열을 돌려 내

document.getElementsByClassName('countdown_product').innerHTML = '<span class="texte_countdown" style="text-align:center;"></span><br/>'; 
document.getElementsByClassName('countdown_product').innerHTML += '<span class="days">'+ days+ '</span>'; 
document.getElementsByClassName('countdown_product').innerHTML += '<span class="hours"><span class="pts_countdown">:</span>' + hours+ '</span>'; 
document.getElementsByClassName('countdown_product').innerHTML += '<span class="minutes"><span class="pts_countdown">:</span>' + minutes+ '</span>'; 
document.getElementsByClassName('countdown_product').innerHTML += '<span class="seconds"><span class="pts_countdown">:</span>' + seconds+ '</span>'; 
document.getElementsByClassName('countdown_product').innerHTML += '<span class="milliseconds"><span class="pts_countdown">:</span>' + milliseconds+ ' </span>' 

, 당신은 선택 요소를 반복하고 선택된 모든 요소에 대한 innerHTML을 업데이트해야합니다. 반환 된 Array 객체에 innerHTML 속성을 추가하고 있습니다. 물론 오류는 발생시키지 않지만 예상 한 것은 수행하지 않습니다. 당신은 당신이 클래스 이름으로 요소를 선택하고 html 또는 append 방법을 사용할 수 있습니다 jQuery를로드하는 것처럼

var elems = document.getElementsByClassName('countdown_product'); 
for (var i = 0; i < elems.length; i++) { 
    elems[i].innerHTML = '<span class="texte_countdown" style="text-align:center;">text</span>'; 
} 

는, jQuery를 장면 뒤에 each 방법을 사용하고 당신을 위해 innerHTML 속성을 업데이트합니다.

$('.countdown_product').html('<element>content</element>');