6

My webpage has the following code:

<html>
<head>
    <title>This is test Page</title>

     <script language="javascript" type="text/javascript">

         document.getElementById("msg1").innerHTML = document.URL.toString();
        </script>

</head>
<body>

    <div class="sss">
        <p id="msg1"></p>
    </div>


</body>
</html>

As you now at the time the script executes the div doesn't exist but I want to put my JavaScript code only In the <head> tag and I won't put it in middle of HTML code.

But this code only works when I put the <script> tag after the <div> tag. I use VS2010 and firefox 19.0.1

Is there anyway to put code in <head> tag?

DarkAjax
  • 15,955
  • 11
  • 53
  • 65
AminM
  • 1,658
  • 4
  • 32
  • 48
  • 4
    No element exists at that point. – elclanrs Mar 28 '13 at 06:44
  • 4
    The body loads after the head. Hence the script in your head is not able to find the element in your body. Place your script tag at the end of your body or wait for the onload event fired on the body to execute the code. – Parthik Gosar Mar 28 '13 at 06:44
  • Exactly. The time the script executes the div doesn't exist. Try coupling a mechanism such as calling the script on hovering the div element or may be a button that explicitly says "get the URL". You either maintain the order or call your script in a particular event. – asgs Mar 28 '13 at 06:45
  • @elclanrs: i know but i want Put all javascript code in HEAD tag – AminM Mar 28 '13 at 07:01

5 Answers5

17

Your script relies on the DOM being ready, so you need to execute that function call only after the DOM is ready.

<script language="javascript" type="text/javascript">

window.onload = function() {
    document.getElementById("msg1").innerHTML = document.URL.toString();
}

</script>
Tharsan
  • 955
  • 1
  • 6
  • 19
2

The various tags in your HTML page are loaded and processed in the order in which they appear on the page. Your <script> tag is executed immediately when it is parsed in the <head>. This is before the <body> and the elements inside the <body> are parsed. So, the script tries to reference an element that is not defined at the time it is executed.

Michael Geary
  • 28,450
  • 9
  • 65
  • 75
1

Michael Geary is right, in order to execute your code, I'd use jQuery library (a de-facto standard in JS development) and utilize the DOM ready event. This will ensure the code in the handler will execute once DOM is fully loaded.

<script>
  $(function(){
    $('#msg1').html(document.URL.toString());
  });
</script>
Valentin V
  • 24,971
  • 33
  • 103
  • 152
  • 2
    tnx for jQuery but i want to use javascript itself...not third-party library....but if One time I wanted use jQuery in my page certainly i use your code! – AminM Mar 28 '13 at 06:59
  • Now that it's 2018, all modern browsers support the document `ready` event. So no need to use jQuery for this any more. – Maximillian Laumeister Sep 27 '18 at 21:15
1

I recommend to to use addEventListener like this:

<script language="javascript" type="text/javascript"> 
document.addEventListener("DOMContentLoaded",() => { 
       document.getElementById("msg1").innerHTML = document.URL.toString();
    });
</script>
Artem Fedotov
  • 432
  • 1
  • 6
  • 21
  • can u explain more?? – AminM Oct 24 '20 at 06:33
  • o catch the loading of the document with nodes I would advise you to use DOMContentLoaded, while window.onload, for example, is triggered only after every image have finished loading, etc. – Artem Fedotov Oct 24 '20 at 09:01
0

Your script uses dom element and must run after the dom loaded.

Wrap your code in a function and call it after dom loaded

function myfunc(){  
//code here
}
window.onload = myfunc();