Javascript Question

JavaScript
1

Hi All,

I am currently working through Sitepoint’s “Simply Javascript” book but I have come to a bit of a stumbling block…

In one of the examples using the getElementById method the code reads:


var target = document.getElementById("berenger");
alert(target.nodeName);

However when I try this in on my Mac it doesn’t work, the page loads up but the alert doesn’t show despite the fact that there is an id with the relevant value in the HTML.

Can anyone help?

Thanks,
Paolo

2

You either need to place that code at very bottom of the document before the closing body tag, or use window.onload = function() { … };. Elements are not accessible until they have loaded.

3

Pages 58-59 are about unobtrusive scripting in the real world, where the book takes you through using the init method of its Core library.

4

Hi Paul,
Does that mean that I shouldn’t worry if the example is not working for me?
Thanks,
Paolo

5

No, you should worry, as this is important. I assume Paul means that the script is not running because the JS is operating before the page has fully loaded. You could try placing the script just before the closing <body> tag and see if that makes any difference.

6

It means, according to the book, that you should put the scripting code within the init method that they take you through on pages 58 and 59 of the book, and use in pretty much all of the code examples from their code archive.

7

Hi guys, thank you for your patience but I’m still not getting this…
What do you mean by placing the code just before the body tag? I have the Javascript code on a separate file with extension .js.
All I’m trying to do is get the following code to work

var target = document.getElementById(“berenger”);
alert(target.nodeName);

I have linked the to the js file in my html using the below

<script type=“text/javascript” src=“example.js”></script>

What else do I need to actually include in my .js file in order for it to work?

Thanks again.

Paolo

8

When the page is loading scripts, whatever is below them does not exist.

There are a couple of ways to deal with this.

One way is used by Simply JavaScript, where it uses an init loader technique.
All information is in the book about how it uses the Core library to init your code.

Another way is becoming more and more popular now that removes the need for such init loaders, and that is to put your script at the end of the body, just before the </body> tag.

For example:


<html>
  <head>
    ...
  </head>
  <body>
    ...
    <script src="script.js"></script>
  </body>
</html>

By placing your script however at the end of the body, the rest of the page above it has already loaded and is available for your script to work with.

9

It works by placing the script before the closing body tag. I need to get more familiar with the init loader technique. Are there any disadvantages to placing the script just above the closing body tag?

Thank you so much for your help Paul you are a legend!

Thanks,
Paolo

10

The disadvantage of placing your script at the end of the body, is that sometimes you might be using a CMS that doesn’t allow that type of placement to occur.
The disadvantage of the init loader technique is that it takes longer until your script can actually run.