Javascript : Uncaught TypeError : null의 메서드 'addEventListener'를 호출 할 수 없습니다.

상당히 간단한 작업을 수행하려고하지만 문서 검색에 충분하지 않은 이유로이 기능을 사용할 수 없습니다. 내가 JS를 분리해서하기 위해 노력하고있어, 여러 가지 이유로Javascript : Uncaught TypeError : null의 메서드 'addEventListener'를 호출 할 수 없습니다.

<A title="Wolfram IP Calc" href="javascript:txt=prompt('Enter%20IP%20address,%20e.g.%2010.20.30.40/29','1.2.3.4/5');%20if(txt)%20window.open('http://www.wolframalpha.com/input/?i='+txt);void(O);">Compute!</A>

, 나는 난관에 충돌 곳이다 :

나는이처럼 보이는 기능 인라인 JS 있습니다.

나는 나에게 오류 Uncaught TypeError: Cannot call method 'addEventListener' of null을 제공하는 다음 테스트 페이지를 만들었습니다

<HTML> <HEAD profile="http://www.w3.org/2005/10/profile"> <script type="text/javascript"> 
var compute = document.getElementById('compute'); 
compute.addEventListener('click', computeThatThing, false); 

function computeThatThing() { 
    txt=prompt('Enter%20IP%20address,%20e.g.%2010.20.30.40/29','1.2.3.4/5'); 
    if(txt) { 
     window.open('http://www.wolframalpha.com/input/?i='+txt); 
    } 
} 
</script></HEAD> 
<BODY> 
<A title="Wolfram IP Calc" id="compute" href="javascript:void(O);">Test</A> 
</BODY> 
</HTML>

나는 그런 문제에 대한 포인트 addEventListener가 작동하지 않을 수 있다는 것을 발견 할 수있었습니다 유일한 것은 내가 '무엇을 가리키는 사전에

<img id="compute" src="http://products.wolframalpha.com/images/products/products-wa.png" />

감사 : <A>으로하지만 (내가 일부 이미지에 부어거야로 좋은 날을 맞는하는) <IMG>을 처리해야한다, 그래서 아무 소용이 다음과 같은 추가 시도 잘못하고있다. 아마도 눈에 띄게 드러났 겠지만 JS에 대한 경험이 거의 없으며 지금까지 필요할 때화물을 중심으로 이동했습니다.

출처

2012-03-24 Jan

사용 JQuery와. $ (document) .ready (function() {}); – PhillipKregg

@PhillipKregg, 제 프로젝트에 Jquery를 추가하면 불필요한 복잡성과로드 시간이 추가됩니다. – Jan

@PhillipKregg 이것은 특히 base64로 인코딩 된 이미지를 포함하여 모든 파일이 하나의 파일에 포함되어 있으므로 외부 종속성이없는 프로젝트를위한 것입니다. – Jan

코드는에있는 <head> => 실행 요소는 ... MDN 약속으로, 그렇게 document.getElementById('compute'); 반환 널

element = document.getElementById(id);
element is a reference to an Element object, or null if an element with the specified ID is not in the document.

MDN

솔루션 렌더링하기 전에 :

페이지 맨 아래에 스크립트를 넣으십시오.
로드 이벤트에서 접속 코드를 호출하십시오.
jQuery 라이브러리 및 DOM 준비 이벤트를 사용하십시오.

jQuery ready 이벤트 란 무엇입니까?

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers...
...

readydocs

출처

2012-03-24 22:24:45 gdoron

감사합니다. 'gdoron'! 해결책 1은 배트에서 바로 작동했습니다. 나는 그것이 솔직히이게 간단하고 직관적이라고 놀랐습니다. 이제 내 프로덕션 코드를 깨뜨리십시오! :) – Jan

나는 morris 차트를 암시하는 동안 같은 문제에 직면하고있다. 나는이 모든 일을했으며 여전히 희망이 없습니다. – Abhinav

Javascript : Uncaught TypeError : null의 메서드 'addEventListener'를 호출 할 수 없습니다.

답변

관련 문제