Extenal JS code
Question
I started learning JS recently, and I have a problem I can not figure out... I tried a lot of solutions and nothing helped.
I have a very basic JS code:
<body>
<h1>My First JS Page</h1>
<p id="demo">My First Paragraph.</p>
<script>
document.getElementById("demo").innerHTML="My First JavaScript";
</script>
</body>
The code works when the script is below but if I attach the same script as an external, and connects it to the HTML in the HEADER, the script just does not work ....
4 answers
solution1
1 2012-08-31 10:18:38
the HTML in the HEADER
If you put the script in the <head> then it will appear before the <p id="demo"> .
Since the script immediately tries to getElementById('demo') , that element doesn't exist. So it gets undefined instead of the element.
You need to either move the script to after the element (as it is in the code in the question), or wrap the code in a function and use that function as an event handler (for an event that doesn't fire until the element exists, such as the load event).
solution2
1 2012-08-31 10:18:56
This happens because the document or <body> part of a HTML page has not yet been loaded.
To overcome that issue, register an event handler to onLoad event of <body> , like this:
<html>
<head>
<script type="text/javascript">
function onDocumentReady() {
document.getElementById("demo").innerHTML="My First JavaScript";
}
window.onload = onDocumentReady;
</script>
</head>
<body>
<h1>My First JS Page</h1>
<p id="demo">My First Paragraph.</p>
</body>
</html>
solution3
1 2012-08-31 10:19:11
This one is about order of operations. The script you have will run immediately once it is parsed by the browser, which means that if there is no rendered element with an id of "demo" nothing will happen. Simply place the <script> block above your <p> element and you'll notice this behavior ( JSFiddle example ). In order to counter this, you need either to make sure all your scripts are at the end of the document (bad form) or that you're using some method to cause your scripts to run once the document is fully loaded (preferred). The two most common methods are either to use the window.onload event:
window.onload = document.getElementById("demo").innerHTML="My First JavaScript";
or to incorporate a JS library such as jQuery and use its built in method for this:
$(document).ready(function() {
$("#demo").html("My First JavaScript");
}
solution4
1 ACCPTED 2012-08-31 10:27:50
You should wrap external scripts in a
window.onload
example
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My first JS</title>
<script src="test.js"></script>
</head>
<body>
<h1>My First JS Page</h1>
<p id="demo">My First Paragraph.</p>
</body>
</html>
JS Filename test.js
window.onload = function () {
document.getElementById("demo").innerHTML="My First JavaScript";
//more code can go here if you want
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.