Javascript: Uncaught TypeError: Không thể gọi phương thức 'addEventListener' của null

Tôi đang cố gắng làm điều gì đó khá đơn giản, nhưng vì lý do của tôi có lẽ không đủ tốt để tìm kiếm tài liệu, tôi không thể làm việc này.Javascript: Uncaught TypeError: Không thể gọi phương thức 'addEventListener' của null

Tôi có một JS trực tiếp hoạt động trông như thế này:

<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>

Vì những lý do khác nhau, tôi đang cố gắng để tách JS, và đây là nơi tôi trúng một snag.

tôi đã tạo ra trang kiểm tra sau đó mang lại cho tôi những lỗi 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>

Điều duy nhất tôi đã có thể thấy rằng điểm cho một vấn đề như vậy là addEventListener không thể làm việc với <A> nhưng nên xử lý <IMG> (mà phù hợp với tôi tốt như tôi sẽ đổ này trên một số hình ảnh), vì vậy tôi cố gắng thêm những điều sau đây không có kết quả:

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

Cảm ơn trước để chỉ ra những gì tôi m làm sai. Nó có lẽ là hiển nhiên rõ ràng, nhưng tôi đã gần như không có kinh nghiệm với JS và tôi đã đi chủ yếu bằng cách nuôi cấy hàng hóa khi tôi cần nó cho đến bây giờ.

Nguồn

2012-03-24 Jan

sử dụng jQuery. $ (document) .ready (function() {}); – PhillipKregg

@PhillipKregg, tôi cảm thấy việc thêm Jquery vào dự án của tôi sẽ làm tăng thêm độ phức tạp và thời gian tải không cần thiết. – Jan

@PhillipKregg Điều này đặc biệt cho một dự án mà mọi thứ được chứa trong một tệp, bao gồm cả hình ảnh được mã hóa base64, do đó nó không có phụ thuộc bên ngoài. – Jan

Mã của bạn là trong <head> => chạy trước khi các yếu tố được trả lại, vì vậy document.getElementById('compute'); lợi nhuận null, như MDN lời hứa ...

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

Giải pháp:

Đặt các tập lệnh ở cuối trang.
Gọi mã đính kèm trong sự kiện tải.
Sử dụng thư viện jQuery và sự kiện sẵn sàng DOM.

Sự kiện jQuery ready là gì?

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

Nguồn

2012-03-24 22:24:45 gdoron

Cảm ơn 'gdoron'! Giải pháp 1 làm việc ngay lập tức. Tôi thành thật ngạc nhiên rằng nó đơn giản và gần như trực quan. Bây giờ để phá vỡ mã sản xuất của tôi! :) – Jan

tôi đang đối mặt với cùng một vấn đề trong khi implimenting biểu đồ morris. và tôi đã làm tất cả điều này và vẫn không có hy vọng. – Abhinav

Javascript: Uncaught TypeError: Không thể gọi phương thức 'addEventListener' của null

Trả lời

Các vấn đề liên quan