Why event listener cannot read property?

Question

I am new at JavaScript and I'm trying some events. The goal here is to click at some text and display a message. I have a p element in my html like this:

<p id="tab">Click me</p>

At the .js file I tried this and nothing happened. The console yells me this:

"Uncaught TypeError: Cannot read property 'addEventListener' of null".

var demo=document.getElementById("tab");

demo.addEventListener("click", go);

function go(){
    alert("Hey");
}

The code above resides in a separate .js file

If your script is in the `head` section, then before your `p` is in `DOM`, the script executes..hence the error — Sandeep Nayak, Oct 18 '15 at 15:12
Make sure you are writing the correct path to your file, there doesn't seem to be anything wrong with your code — Saumil, Oct 18 '15 at 15:13
Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Sebastian Simon, Oct 18 '15 at 15:15

T J · Answer 1 · 2015-10-18T15:23:48.640

2

Your script seems to be working fine. Make sure it runs after the element is created by adding in it the onload handler, or placing it just before </body>

var demo = document.getElementById("tab");

demo.addEventListener("click", go);

function go() {
  console.log("Hey");
}

<p id="tab">Click me</p>

edited Oct 18 '15 at 15:23

answered Oct 18 '15 at 15:13

T J

42,762
13
83
138

If you inspect this webpage and click the demo in my answer, you'll get it. That's because the code in stack snippet is wrapped in `onload` event handler and runs after elements are created. In your case, your code `document.getElementById("tab");` is running before the element is actually created so it returns `null` – T J Oct 18 '15 at 15:20
I just wrote the same code inside a window.onload = function(){ // the old script here} and it worked fine. Why? – Oct 18 '15 at 15:29
@CélioRodrigues as i told earlier, previously your code was executing before the `tab` element was created... script is executed as soon as browser encounter them... if you have the script before the element, it gets executed before the element is created. `onload` event is fired when the entire document is created and all resources are loaded. So it works – T J Oct 18 '15 at 16:02
Got it. Thank you very much – Oct 18 '15 at 16:14

score 0 · Accepted Answer · answered Oct 18 '15 at 15:46

Code shown below works in IE, Chrome and FireFox - I didn't test this in  
any other browser.
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
    function InitPage() {
        var demo = document.getElementById("tab");
        demo.addEventListener("click", go);
        function go() {
            console.log("Hey");
        }
    }
</script>
</head>
<body onload="InitPage();">
    <p id="tab">Click me</p>
</body>
</html>

Why event listener cannot read property?

2 Answers2