why are some variables not defining?

Question

I feel new to javascript asking this and am absolutely stumped here. No idea why and trying to figure out for many many hours, but if, for example, I have this line in my script:

var listen = document.getElementsByClassName('test_this')[0];

On my local machine, when I type 'listen' into the console, it returns undefined, but if I manually type this into the console then it works. For example:

the HTML:

<p class='test_this'>hi</p>

the JS:

var listen = document.getElementsByClassName('test_this')[0];

listen.addEventListener("click", function onclick(event) {
  alert('hi');
});

function testZis() {
  alert('test worked');
}
alert('saysHiAnyway');

Codepen URL: https://codepen.io/anon/pen/pqZNVR

If I load the codePen URL, I get the correct alert, but on my local machine in my browser, I just get this error: Cannot read property 'addEventListener' of undefined and no alert - presumably because, for some unknown reason, the var listen declaration line isn't working.

Can someone explain what on earth is going on here? I'd be really appreciative. I have a feeling it's something unbelievably simple, yet it seems so difficult to identify. Thanks for any help.

Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Chris G, Jan 09 '19 at 00:12
Also, googling the error message leads [here](https://stackoverflow.com/questions/26107125/cannot-read-property-addeventlistener-of-null) — Chris G, Jan 09 '19 at 00:13
the script loads before the closing head tag - is it loading prematurely? — user8758206, Jan 09 '19 at 00:14
Yes, because it runs right away, and at that point the element doesn't exist yet. — Chris G, Jan 09 '19 at 00:15
put your script tag/code right above the closing body tag of your page. If you'd like to you can also or instead use the `defer`(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) attribute to stop it from running until after the page loads. Note: If you use `defer` the script must be loaded in, not inline. — zfrisch, Jan 09 '19 at 00:15
interesting comment zfrisch, but is there some JS I can use too? because in this unique case, I can't move or edit where the script is being called — user8758206, Jan 09 '19 at 00:17
All of this info can be found in the two duplicates I linked. — Chris G, Jan 09 '19 at 00:19
you mean this: document.addEventListener("DOMContentLoaded", function(event) { alert('saysHiAnyway'); }); - still cannot get it to work btw — user8758206, Jan 09 '19 at 00:22
working now, thank you - was a combination of the ordering of the code and this — user8758206, Jan 09 '19 at 00:27

score 2 · Accepted Answer · answered Jan 09 '19 at 00:24

You have a couple of options here to fix this:

Place your <script> tags below all of your HTML code, right above the closing </body> tag.

The alternative would be to wrap all of your code within a window.onload event handler like so:

window.onload = function() {
    //All of your code goes here
}

why are some variables not defining?

1 Answers1