GetElementbyID가 실행되지 않습니다.

Question

여기에서 읽은 내용을 보면이 코드가 작동 할 것으로 기대되지만 그렇지 않습니다. "lonext"버튼에 클릭 이벤트를 추가하는 두 가지 방법을 시도했습니다. 둘 다 일하지 않아. 왜이게 될지 모르겠다.

window.onload = function() { 

var goSC = function() { //go to the sucess criteria section 
    document.getElementsByClassName("guidance1").style.display = "none"; 
    document.getElementsByClassName("guidance2").style.display = ""; 
    alert("button clicked"); 

//first try 
document.getElementById("lonext").addEventListener("click", function() { 
    goSC();  
    }, false); 

//second try 
document.getElementById("lonext").onclick = goSC; 

} 

Answer 1

getElementsByClassName 다시 표시 NodeList 같은 클래스가 아닌 하나의 요소와 DOM에 많은 요소를 가질 수 있기 때문이다.

그래서 : 나는 또한 강력하게 검사 등 지르고 또는 크롬 개발자 도구 모음과 같은 자바 스크립트 디버깅 도구를 사용하여 당신을 추천 할 것입니다

$(function() { 
    $('#lonext').click(function() { 
     $('.guidance1').hide(); 
     $('.guidance2').show(); 
    }); 
}); 

:

당신이 jQuery를 사용한 경우

var goSC = function() { 
    var guidance1 = document.getElementsByClassName("guidance1"); 
    for (var i = 0; i < guidance1.length; i++) { 
     guidance[i].style.display = "none"; 
    } 

    var guidance2 = document.getElementsByClassName("guidance2"); 
    for (var i = 0; i < guidance2.length; i++) { 
     guidance[i].style.display = ""; 
    } 

    alert("button clicked"); 
}); 

window.onload = function() { 
    document.getElementById("lonext").onclick = goSC; 
}; 

이 단순화 될 수있다 귀하의 자바 스크립트 코드와 그것으로 잠재적 인 오류를 참조하십시오. Console 탭에는 자바 스크립트 코드의 가능한 오류에 대한 중요한 정보가 포함되어 있습니다.