All geek questions in one place

When and where to put javascript in html

I am new to Java script. I practice the code. When I put my code in the chapter section, then I get the null element, and when I put it in the body, but before the element, I also get null, but if I put it inside the body, but after the element I I get the item. I want to ask why I get null in the case of the first two cases. Here is my code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/attributes.js"></script> // null </head> <body> <script type="text/javascript" src="js/attributes.js"></script> // null <a id="braingialink" onclick="return showAttributes();" href="http://www.braingia.org" >Steve Suehring Web Site </a> <script type="text/javascript" src="js/attributes.js"></script> // ok </body>

Here is my javascript

 var a1 = document.getElementById("braingialink"); //get null in first two cases window.alert(a1.getAttribute("href")); a1.setAttribute("href", "www.google.com"); window.alert(a1.getAttribute("href")); function showAttributes() { var e = document.getElementById("braingialink"); var elementList = ""; for (var element in e) { /** * Sometimes, especially when first programming with JavaScript, you might not know what * attributes are available for a given element. But you don't have to worry about that, because * of a loop that calls the getAttribute() method. */ var attrib = e.getAttribute(element); elementList = elementList + element + ": " + attrib + "\n"; } //end of for() alert(elementList); } //end of function showAttributes

And also tell me by placing <script type="text/javascript" src="js/attributes.js"></script>

after the a element, this is the same as what I write the script in the script tag, for example

 <a href="http://www.braingia.org" id="braingialink">Steve Suehring Web Site</a> <script type="text/javascript"> var a1 = document.getElementById("braingialink"); alert(a1.getAttribute("href")); a1.setAttribute("href","http://www.microsoft.com"); alert(a1.getAttribute("href")); </script>

Do both things mean the same thing?

thanks

+4
source share
7 answers

The browser parses the document from top to bottom, and if it encounters a <script> block (whether it be a built-in script or the inclusion of an external JS file), it runs this JavaScript before understanding the document more. If this particular block of code tries to refer to any elements, it can only access those that are above it in the source, that is, it has already been analyzed.

The document.getElementById() method returns null if no elements are found for your identifier, so if you try to use it to access the elements below it in the source, they have not been parsed yet and cannot be found.

The two most common practices for this are:

  • Put all your scripts at the bottom of the <body> so that when you run all the elements are parsed.

  • Create an "onload" handler, that is, define a function that will be launched as soon as the document finishes loading. You can do this from a script block in <head> - the JavaScript that defines the onload function runs immediately, but then the function runs later after everything loads.

Below is the easiest way to do option 2:

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

There is nothing to stop you from doing 1 and 2 in the same document, and also throwing some <script> blocks in the middle of the document, but most people find that it does not support all of its code in one place.

+6
source

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 both in the body and in the chapter section at the same time. A common practice is to place all functions in a section of a chapter or at the bottom of a page. Thus, they are all in one place and do not interfere with the contents of the page.

+2
source

You get a zero value in the head because the DOM is not loaded - your objects are missing at this time. Use this:

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

Oh, and also take a look at the .ready() function of jQuery here . This will certainly help headaches later.

+1
source

Usually 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 you cannot access the element is because the code is executed before the browser has parsed the code for the element, so the element just doesn't exist yet.

You use the load event to run the code after loading the document:

 window.onload = function() { // here you put the code that needs to access the elements }
+1
source

You need to understand how web browsers load resources onto a page. Firefox -> Configure Firebug Network Bar tab displays a graph of resource loading. If you use jQuery or something like that (and it’s worth it) - then paste the code inside $(document).ready(function() { .. } - this will ensure that the page is fully loaded.

Also, it’s good practice to include your custom js last thing before the </body> - this DOM page would load.

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

+1
source

It would be best right before the closing tag so as not to damage the loading and rendering of the page in general! It is also recommended by google, for example, for snippet analytics, as well as for facebook!

0
source

you get null values ​​because your script is running while the browser is still loading the page. Since the page may not yet display in all elements, you get null values. you need to run the script when the page finishes loading. put your script in the HEAD element and call it on the body onload event.

0
source

Source: https://habr.com/ru/post/1395574/

More articles:


All Articles