JavaScript- cannot change style when my script in head

Question

I'm trying to get my JavaScript to work when I insert the script into the head or body elements.

Here are my examples:

Firstly I insert it into the body like this example (working):

    <html>
    <body>
    
    <p id="p2">Hello World!</p>
    
    <script>
    document.getElementById("p2").style.color = "blue";
    </script>
    
    <p>The paragraph above was changed by a script.</p>
    
    </body>
    </html>

When I move the script into the end of the body (also working):

<html>
<body>

<p id="p2">Hello World!</p>

<p>The paragraph above was changed by a script.</p>

<script>
document.getElementById("p2").style.color = "blue";
</script>
</body>
</html>

But when I move it into the head it stops working:

 <html>
 <head>
  <script>
  document.getElementById("p2").style.color = "blue";
  </script>
 </head>
 <body>

 <p id="p2">Hello World!</p>

 <p>The paragraph above was changed by a script.</p>

 </body>
 </html>

Make sure your script execute after the page is ready. https://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the — Tanmay Maity, Jul 28 '17 at 07:06

score 5 · Answer 1 · answered Jul 28 '17 at 07:02

Use keyword defer for this:

Description of defer:

A script that will not run until after the page has loaded.

    <html>
    <body>
    
    <p id="p2">Hello World!</p>
    
    <script defer>
    document.getElementById("p2").style.color = "blue";
    </script>
    
    <p>The paragraph above was changed by a script.</p>
    
    </body>
    </html>

Bhargav Chudasama · Answer 2 · 2017-07-28T07:12:42.323

the problem is your script in head and p2 has not define yet

so you write script in document.ready its work because script run after document has been load

for run jquery code you need to add jquery library for this

link:jquery library

or write code in

window.onload = function() {
  document.getElementById("p2").style.color = "blue";
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <script>
    $(document).ready(function() {
      document.getElementById("p2").style.color = "blue";
    });
  </script>
</head>

<body>

  <p id="p2">Hello World!</p>

  <p>The paragraph above was changed by a script.</p>

</body>

</html>

This will indeed solve the problem, however you need a jQuery library for this. I think your answer will be better if you explain this too. — Rubenxfd, Jul 28 '17 at 07:09

Supratik Rulz · Accepted Answer · 2017-07-31T10:22:42.203

4

you can use window.onload which means that it will invoke only after HTML page is loaded. Here is a quick reference for your study . Thank You!

edited Jul 31 '17 at 10:22

answered Jul 28 '17 at 07:08

Supratik Rulz

215
2
8

score 3 · Answer 4 · answered Jul 28 '17 at 07:08

it is because you are calling p2 at head and it is not defined at that moment. compiler don't know where is p2 that's why it is showing undefined.

One of the solutions is to do it like below:

window.onload = function () { 
   document.getElementById("p2").style.color = "blue";
}

The above script will run when the page is loaded completely

Frits · Answer 5 · 2017-07-28T08:41:08.273

"Why it does not work when I insert script in head?"

This is because the script is trying to access a DOM object before it exists. It's one of the main reasons jQuery users tend to use $(document).ready(); wrapped around there functions.

An older practice was to always load your script below the body of your HTML document, however it came with it's own problems.

Using <script defer> /* your code here */ </script> is the generally accepted method if you want your script to only execute after the document is loaded. Alternatively, you can use an external library like jQuery and use:

$(document).ready(function(){
    //your code here
});

If you do decide to use jQuery, you could also replace your current script (document.getElementById("p2").style.color = "blue";) with:

$(document).ready(function(){
    $('#p2').css({'color':'blue'});
});

This however isn't necessary, just an interesting option to consider

score 1 · Answer 6 · answered Jul 28 '17 at 10:20

When your script code is in the head tag, it is executed but the DOM element is not ready yet. So, no change occurs. For such cases always use body.onload, because then your script will be executed after the elements in the body is ready.

Bonus: The script will also not work if you place it in the <body> above the <p> tag.

JavaScript- cannot change style when my script in head

6 Answers6