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>
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 Commented Oct 16, 2012 at 18:27
- 6 @PaulTomblin Probably. But that's also horrible advice is you want to have any idea what you are really doing. slideshare/rmurphey/the-jquery-divide-5287573 – Alex Wayne Commented Oct 16, 2012 at 18:29
- 1 @PaulTomblin "I'm trying to learn the basics of JavaScript" so I don't think so... – Ian Commented Oct 16, 2012 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 Commented Oct 16, 2012 at 18:36
- 2 @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 Commented Oct 16, 2012 at 18:46
4 Answers
Reset to default 7The 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);
}
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>
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.
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.