JavaScript - can't change style when my script is in head
I am trying to get my JavaScript to work when I insert a script into elements head
or body
.
Here are my examples:
First I paste it in body
like this example (works):
<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 script
to the end body
(also works):
<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 to 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>
source to share
Use the defer keyword for this:
Deferral Description:
A script that won't run until the page is 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>
source to share
the problem is that your script is in your head and p2
hasn't been decided yet
so you write a script to document.ready
your work because it script
runs after the document is loaded
to run the jquery code you need to add a library jquery
for this
reference: jQuery library
or write the 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>
source to share
this is because you are calling p2 on the head and it is undefined at that point. the compiler doesn't know where p2 is, why it shows undefined.
One solution is to do it like below:
window.onload = function () {
document.getElementById("p2").style.color = "blue";
}
The above script will run when the page is fully loaded
source to share
"Why doesn't it work when I put the script in my head?"
This is because the script is trying to access the DOM object before it exists. This is one of the main reasons jQuery users tend to use $(document).ready();
wrapped functions.
The older practice was to always load your script under the body of your HTML document, however it has gotten its own problems .
Usage <script defer> /* your code here */ </script>
is the generally accepted method if you only want your script to 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 choose to use jQuery, you can also replace the current script ( document.getElementById("p2").style.color = "blue";
) with:
$(document).ready(function(){
$('#p2').css({'color':'blue'});
});
This is not necessary however, just an interesting option to consider.
source to share
When your script code is in the main tag, it gets executed, but the DOM element isn't ready yet. Thus, no change occurs. For cases like this, always use body.onload
because then your script will be executed after the elements in the body are ready.
Bonus: the script also won't work if you put it in the <body>
above tag <p>
.
source to share