Basic JavaScript EventListener NOT work?

Question

I'm trying to learn the basics of JavaScript I cant figure out why this doesn't work...it's so basic?

<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
    ul{
        list-style-type:none;
    }
    div{
        width:300px;
        height:200px;
        background-color:#0066cc;
    }
</style>

<script language="text/javascript"> 
    var testing = document.getElementById("addBtn");
    testing.addEventListener("click", function(e){ alert("test") } , false);
</script>

</head>
<body>
<ul id="placeholder"></ul>
<a href="#" id="addBtn">Add</a>
</body>
</html>

This is *so* much easier if you skip basic Javascript and learn jQuery instead. — Paul Tomblin, Oct 16 '12 at 18:27
@PaulTomblin Probably. But that's also _horrible_ advice is you want to have any idea what you are really doing. http://www.slideshare.net/rmurphey/the-jquery-divide-5287573 — Alex Wayne, Oct 16 '12 at 18:29
@PaulTomblin "I'm trying to learn the basics of JavaScript" so I don't think so... — Ian, Oct 16 '12 at 18:29
@AlexWayne, I'm not seeing anything in that slideshow that says why you shouldn't learn jQuery, only that shitty programmers write shitty code no matter what tool they use. — Paul Tomblin, Oct 16 '12 at 18:36
@PaulTomblin The moral of that presentation is learn JavaScript, and then learn jQuery as one of the _many_ tools in your toolbox. Instead of _just_ learning jQuery. jQuery should be treated as a javascript library, not an entire language. You wouldn't learn Struts without Java, Rails without Ruby, UIKit without ObjectiveC. And you shouldn't learn jQuery without JavaScript. — Alex Wayne, Oct 16 '12 at 18:46
@PaulTomblin - "Just use jQuery" isn't really good advice. It's barely advice at all, given that the whole point here is to learn *why* the OP's code doesn't work. — Wayne, Oct 16 '12 at 18:52
Actually, the moral of that slideshow is "try to make a point about one thing (jQuery), make a point about something completely different (badly structured code), and then pretend you've made a point about the thing you were trying to make a point about". — Paul Tomblin, Oct 16 '12 at 19:11

score 7 · Accepted Answer · answered Oct 16 '12 at 18:27

The addBtn is not loaded when you attempt to access it. You should perform that action once the DOM has loaded, either by moving that code to the bottom of the file, or through the onload event:

window.onload = function() {
    var testing = document.getElementById("addBtn");
    testing.addEventListener("click", function(e){ alert("test") } , false);
}

score 2 · Answer 2 · answered Oct 16 '12 at 18:27

When the code:

var testing = document.getElementById("addBtn");

gets run, the addBtn element has not yet been parsed. One thing you could do would be to move the <script> tag down to the bottom of the page.

Another thing you could do is run the code within the onload event. Something like:

<script language="text/javascript">
   window.onload = function () {
      var testing = document.getElementById("addBtn");
       testing.addEventListener("click", function(e){ alert("test") } , false);
   };
</script>

score 1 · Answer 3 · answered Jul 08 '22 at 14:21

The other approach you can take is by using the defer attribute. As the name suggests it defers the load/execution of the script after the whole page has loaded. You just need to add the defer attribute to the opening script tag. It just works like the window.onload.

It's something like this

<script defer type="text/javascript">
  var testing = document.getElementById("addBtn");
  testing.addEventListener("click", function(e){ alert("test") } , false);
</script>

And another way is that you can take this script element and put it right above the closing </body> tag. I suggest you to always put your script elements just right above your closing body tag and your code would just always work fine.

score 0 · Answer 4 · edited May 23 '17 at 12:18

0

In addition to using window.onload (which is the key answer to your question), consider using <script> or <script type="text/javascript">, as the "language" attribute is deprecated. More info here.

edited May 23 '17 at 12:18

Community

1
1

answered Oct 16 '12 at 18:43

Crogo

483
4
8

Basic JavaScript EventListener NOT work?

4 Answers4