[javascript] null의 ‘addEventListener’속성을 읽을 수 없습니다.

Program / 글쓴이

프로젝트에 바닐라 자바 ​​스크립트를 사용해야합니다. 몇 가지 기능이 있는데 그중 하나는 메뉴를 여는 버튼입니다. 대상 ID가있는 페이지에서는 작동하지만 ID가없는 페이지에서는 오류가 발생합니다. 함수가 ID를 찾을 수없는 페이지에서 “Cannot read property ‘addEventListener’of null”오류가 발생하고 다른 함수가 작동하지 않습니다.

다음은 메뉴를 여는 버튼의 코드입니다. 

function swapper() {
toggleClass(document.getElementById('overlay'), 'open');
}

var el = document.getElementById('overlayBtn');
el.addEventListener('click', swapper, false);

var text = document.getElementById('overlayBtn');
text.onclick = function(){
this.innerHTML = (this.innerHTML === "Menu") ? "Close" : "Menu";
return false;
};

어떻게 처리합니까? 이 코드를 다른 함수로 모두 래핑하거나 if / else 문을 사용하여 특정 페이지에서만 ID를 검색하지만 정확히 확실하지는 않습니다.

답변

가장 쉬운 방법은 el이벤트 리스너를 추가하기 전에 null이 아닌지 확인하는 것 입니다.

var el = document.getElementById('overlayBtn');
if(el){
  el.addEventListener('click', swapper, false);
}

답변

DOM이 완전히로드되기 전에 실행되기 때문에 document.getElementById('overlayBtn');반환 되는 것 같습니다 null.

이 코드 줄을 아래에 넣으면

window.onload=function(){
  -- put your code here
}

그러면 문제없이 실행됩니다.

예:

window.onload=function(){
    var mb = document.getElementById("b");
    mb.addEventListener("click", handler);
    mb.addEventListener("click", handler2);
}


function handler() {
    $("p").html("<br>" + $("p").text() + "<br>You clicked me-1!<br>");
}

function handler2() {
    $("p").html("<br>" + $("p").text() + "<br>You clicked me-2!<br>");
}

답변

비슷한 상황에 직면했습니다. 페이지가로드되기 전에 스크립트가 실행되기 때문일 수 있습니다. 페이지 하단에 스크립트를 배치하여 문제를 피했습니다.

답변

동일한 오류가 발생했지만 null 검사를 수행해도 도움이되지 않는 것 같습니다.

내가 찾은 해결책은 DOM이로드를 마칠 때 확인하기 위해 전체 문서에 대한 이벤트 리스너 내부에 함수를 래핑하는 것입니다.

document.addEventListener('DOMContentLoaded', function () {
    el.addEventListener('click', swapper, false);
});

HTML 클래스와 ID를 동적으로 변경하는 프레임 워크 (Angular)를 사용하고 있기 때문이라고 생각합니다.

답변

JS가 HTML 부분 이전에로드되는 bcz 일 뿐이므로 해당 요소를 찾을 수 없습니다. 윈도우가로드 될 때 호출 될 함수 안에 전체 JS 코드를 넣으십시오.

html 아래에 Javascript 코드를 넣을 수도 있습니다.

답변

스크립트가 본문보다 먼저로드되고 내용 후에 스크립트 유지

답변

본문 태그 끝에 스크립트를 넣습니다.

<html>
    <body>
        .........
        <script src="main.js"></script>
    </body>
</html>