Simple javascript eventlistener not working?

Question

I really don't see what the issue is here. I'm pretty sure I made no typo either.

var homeButton = document.getElementById("home");

homeButton.addEventListener("click", myFunction);

function myFunction() {
  alert('Hello');
}

<div id="nav">
  <a id="home" class="navbutton" href="#">Home</a>
  <a id="trending" class="navbutton" href="#">Trending</a>
  <a id="categories" class="navbutton" href="#">Categories</a>
  <a id="about" class="navbutton" href="#">About</a>
</div>

script should be at the bottom of the body?did you?if you put the script in another file,better put the script in window.onload=function(){/*your code*/},so, how about show your all code? — xianshenglu, Feb 10 '18 at 09:54
i tried https://jsfiddle.net/zLmsng6c/ and it is working, may be the js file is not linked properly — Sanjit Bhardwaj, Feb 10 '18 at 09:55
Strange. I'm using Atom text editor. Could it be a problem with the editor? — Team Phoenix, Feb 10 '18 at 09:56
@TeamPhoenix,where did you put the script ?in the body or head? — xianshenglu, Feb 10 '18 at 09:56
Open the developer tools. Look in the Console. Are any errors reported? Look in the Network tab. Is the JS requested? Does the response contain the data you expect? — Quentin, Feb 10 '18 at 09:57
Your script tag must be in the wrong place. `document.getElementById("home")` will only work if that element exists on the page *before* the script tag. You should have your ` — Reinstate Monica Cellio, Feb 10 '18 at 09:59
There is an error saying "Cannot read property addEventListener for null" — Team Phoenix, Feb 10 '18 at 09:59
You would get that error if you've got the script before the element. — Reinstate Monica Cellio, Feb 10 '18 at 10:00
Duplicate: https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element — Quentin, Feb 10 '18 at 10:15
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) — Dmitry, Feb 10 '18 at 12:29

score 0 · Accepted Answer · answered Feb 10 '18 at 10:08

HTML of the document must be rendered first, in order to refer to element in the document. So you cannot use getElementById, or other element selection methods, if you put JS in the begging of the file. So move your all the scripts into the bottom of the document.

score -1 · Answer 2 · answered Feb 10 '18 at 10:13

this code is should be like this.

window.onload=function(){
var homeButton = document.getElementById("home");
homeButton.addEventListener("click", myFunction);
}
function myFunction() {
  alert('Hello');
}

<div id="nav">
  <a id="home" class="navbutton" href="#">Home</a>
  <a id="trending" class="navbutton" href="#">Trending</a>
  <a id="categories" class="navbutton" href="#">Categories</a>
  <a id="about" class="navbutton" href="#">About</a>
</div>

Simple javascript eventlistener not working?

2 Answers2