Simple event listener not working - JS

Question

I have written an increbily simple event listener and yet it comes up with the error: Uncaught TypeError: Cannot call method 'addEventListener' of null which suggests it is to do with the id maybe (also it works with document?

<html>
<head>
    <script type="text/javascript">
        function message () {
        alert("Hello!");
        }
        var button = document.getElementById('button');
        button.addEventListener('click', message, true);
    </script>
</head>
<body>
    <input type="button" id="button" value="Click me!" />
</body>
</html>

(I know I'm going to feel stupid after this, but I am a JS noob)

Put the script section at the bottom of your body section right above `
` , the element you're referencing was not loaded yet. — Benjamin Gruenbaum, Jul 18 '13 at 07:27
It's best practice to put at the bottom of the body section in most cases - unless you want them to run _before_ the elements are loaded. — Benjamin Gruenbaum, Jul 18 '13 at 07:29

score 13 · Accepted Answer · answered Jul 18 '13 at 07:28

13

at the time your script executes, the DOM has not been created. you can place your script after the body tags to run it after reading the html - but the better way to do it is by listening for DOMContentLoaded.

document.addEventListener('DOMContentLoaded', init, false);
function init(){
  function message () {
    alert("Hello!");
  }
  var button = document.getElementById('button');
  button.addEventListener('click', message, true);
};

window.onload = init works too. I don't like it because it looks to me like one script could overwrite window.onload to be its own init function. (i haven't confirmed that happens or not)

answered Jul 18 '13 at 07:28

Plato

9,788
2
36
58

you're welcome! good luck welcome to js – Plato Jul 18 '13 at 07:30
if `addEventListener` doesn't work, you can set attribute like: `document.getElementById("ID").setAttribute("onclick","javascript:alert('hello');");` – Amin Darvand Mar 20 '19 at 18:40

score 2 · Answer 2 · answered Jul 18 '13 at 07:27

2

Because this script is executed when body isn't loaded yet. Use onload event, and within it paste your code.

answered Jul 18 '13 at 07:27

user1882981

180
1
2
15

Simple event listener not working - JS

2 Answers2