Home/ Questions/Q 7623793
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T04:47:44+00:00

I often see some JavaScript libraries that are called in the head tag of

  • 0

I often see some JavaScript libraries that are called in the head tag of an html page. However, if these libs call an element in the body tag, there’ll be a response (still from the head tag). When I try to call an element from the head, there is no response – why?

Thanks in advance. 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The browser parses the html page from top to bottom, executing any <script> blocks in place as it finds them. Which means if the JavaScript attempts to access elements on the page it can only see those included higher in the page because the ones lower down have not been parsed yet.

    There are two ways to deal with this:

    1. Put your <script> block at the bottom, just before the closing </body> tag (or at least put it after the elements it needs to reference), and/or

    2. Use an onload (or, if you like jQuery, a $(document).ready()) handler.

    One way to setup an onload handler is like this:

    <head>
<script>
   window.onload = function() {
      // this function will be called by the browser after
      // the entire page has loaded and thus code in the function
      // can access any element on the page.
   };
</script>
</head>
<body>
   ... various elements ...
</body>

    You may have also seen something like this:

    <body onload="someFunction();">

    Where someFunction() can be defined in a <script> block in the <head>. It’s basically the same thing, but it’s so 1990s to do it with an attribute in the html like that. (Actually even the window.onload() is out of date now, but it works and I don’t have time to explain the .addEventListener() method.)

    • 0