When And Where To Put Javascript In Html

August 20, 2022 Post a Comment

I am new to Java script. I am practicing code.When i put my code in the head section, then i get element null, and when i put it inside body, but before element, then i also get nu

Solution 1:

The browser parses the document from top to bottom, and if it encounters a <script> block (whether inline script or inclusion of an external JS file) it runs that JavaScript before parsing any more of the document. If that particular code block tries to refer to any elements it can only access the ones above it in the source, i.e., the ones already parsed.

The document.getElementById() method returns null if no element is found for the id you supply, so if you try to use it to access elements below it in the source they've not yet been parsed and can't be found.

The two most common practices to deal with this are:

Put all of your script at the bottom of the <body> such that when it runs all of the elements will have been parsed.
Create an "onload" handler, that is, define a function that will be run as soon as the document finishes loading. You can do this from a script block in the <head> - the JavaScript that defines the onload function is run immediately, but then the function is executed later after everything has loaded.

Following is the simplest way to do option 2:

window.onload = function() {
   var x = document.getElementById("x");
   // other element manipulation here
};

There is nothing stopping you doing 1 and 2 in the same document, along with throwing some <script> blocks in the middle of the document, but most people find it neater to keep all their code in the one spot.

Solution 2:

see http://www.w3schools.com/js/ and http://www.w3schools.com/js/js_whereto.asp

You can place an unlimited number of scripts in your document, and you can have scripts in both the body and the head section at the same time. It is a common practice to put all functions in the head section, or at the bottom of the page. This way they are all in one place and do not interfere with page content.

Solution 3:

You're getting null in the head because the DOM has not loaded - your objects are nonexistent at that time. Use this:

window.onload = function () {
    // Your code
}

Oh and also take a look at the .ready() function of jQuery here. It would certainly help the headache later on.

Baca Juga

Solution 4:

Normally you should put script blocks inside the head tag. You can put them in the body tag if you have a special reason, for example to make the script load later because it comes from a slow server.

The reason that you can't access the element, is that the code runs before the browser has parsed the code for the element, so the element simply doesn't exist yet.

You use the load event to run the code after the document is loaded:

window.onload = function() {

  // here you put the code that needs to access the elements

}

Solution 5:

You need to understand how web browsers load resources into a page. Firefox -> Firebug add-on Net tab shows the timeline of how resources are loaded. If you are using jQuery or something like it (and you aught to) - then stick your code inside $(document).ready(function() { .. } - that will ensure the page has fully loaded.

Also, it's a good practise to to include your custom js last thing before </body> tag - that way page DOM would have loaded.

Have a read if you want to understand this deeper: http://www.goodreads.com/book/show/6438581-even-faster-web-sites and http://www.goodreads.com/book/show/1681559.High_Performance_Web_Sites

JavaScript Creator