Why is the click event not raised?

Question

What is wrong with this code? I tested it in IE10 and Firefox but the click event was not raised.

  <html>
  <head>
  <title>Sandbox</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

  <style type="text/css" media="screen">
  #t1, #t2 { border: 2px solid gray; }
  #t2 { background-color: pink; }
  </style>

  <script>
  // Function to change the content of t2
  function modifyText(new_text) {
    var t2 = document.getElementById("t2");
    t2.firstChild.nodeValue = new_text;    
  }

  // Function to add event listener to table
  var el = document.getElementById("outside");
  el.addEventListener("click", function(){modifyText("four")}, false);
  </script>

  </head>

  <body>
  <table id="outside">
      <tr><td id="t1">one</td></tr>
      <tr><td id="t2">two</td></tr>
  </table>
  </body>
  </html>

score 3 · Accepted Answer · edited May 23 '17 at 11:55

Your JavaScript is running before the DOM is ready:

Uncaught TypeError: Cannot call method 'addEventListener' of null

You can't reliably interact with the DOM before it's ready, so move your JavaScript to the bottom of the body.

Just in case you were thinking of using window.load = function() {...}, a callback attached to window.load won't run until all of the resources are loaded, which probably isn't what you want. There's no simple plain-JavaScript alternative to jQuery's $(document).ready(), but you could use something from here: $(document).ready equivalent without jQuery

score 1 · Answer 2 · answered May 12 '13 at 17:40

1

Use

window.onload = function() {
  var el = document.getElementById("outside");
  el.addEventListener("click", function(){modifyText("four")}, false);
}

answered May 12 '13 at 17:40

Tamil Selvan C

18,342
12
44
63

Why is the click event not raised?

2 Answers2