html elements load after Javascript file even though the <script> tag is at the bottom of the <body> tag
Question
I got a Javascript problem. The HTML elements keep waiting for the javascript file, even though the script tag is at the bottom of the page. Elements do not update if changed and disappear after 5 seconds This is the code:
code:
<!DOCTYPE html>
<html>
<head>
<title>Javascript</title>
<link rel="stylesheet" type="text/css" href="">
</head>
<body>
<h1>javascript in HTML</h1>
<p>HElllllooooo</p>
<script type="text/javascript">
var age = prompt("What is your age?");
if (Number(age) < 18) {
alert("Sorry, you are too young to drive this car. Powering off ");
} else if (Number(age) > 18) {
alert("Powering on. Enjoy the ride!");
} else if (Number(age) === 18 ) {
alert("Congratulations on your first year of driving. Enjoy the
ride!");
}
</script>
</body>
</html>
4 answers
solution1
1 2018-06-15 02:45:50
prompt is synchronous, and hence blocks execution until it returns. That's why the second line (and the rest of the lines) don't execute until your prompt returns.
As for the script tag being at the bottom, enforce it like this:
window.onload = myFunction
solution2
0 2018-06-13 18:07:45
You may need to add it inside of its own anonymous function which can be set to run onload ;
That in theory should work fine:
(function () {
var age = prompt("What is your age?");
if (Number(age) < 18) {
alert("...");
} else if (Number(age) > 18) {
alert("...");
} else if (Number(age) === 18) {
alert("...");
} else {
// ... fallback logic?
}
})();
Or as it has been answered, you may want to wrap the code inside of a window.load var. Also an anonymous function.
solution3
0 2021-11-25 15:22:20
Just simply add an onload attribute on the <body> like so, whatever:
<body onload="carsGoBrr()">
And then DEFINE the function:
function carsGoBrr() {
var age = prompt("What is your age?");
if (Number(age) < 18) {
alert("Sorry, you are too young to drive this car. Powering off ");
} else if (Number(age) > 18) {
alert("Powering on. Enjoy the ride!");
} else if (Number(age) === 18 ) {
alert("Congratulations on your first year of driving. Enjoy the ride!");
}
}
FULL CODE ( By my style of coding ;) ):
<!DOCTYPE html>
<html>
<head>
<title>Javascript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>javascript in HTML</h1>
<p>HElllllooooo</p>
<script type="text/javascript">
function carsGoBrr() {
var age = prompt("What is your age?");
if (Number(age) < 18) {
alert("Sorry, you are too young to drive this car. Powering off ");
} else if (Number(age) > 18) {
alert("Powering on. Enjoy the ride!");
} else if (Number(age) === 18 ) {
alert("Congratulations on your first year of driving. Enjoy the ride!");
}
}
</script>
</body>
</html>
solution4
-1 2018-06-13 17:58:57
Have you tried placing your conditional into a window.onload function?
window.onload = function(){
// code goes here
};
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.