html elements load after Javascript file even though the <script> tag is at the bottom of the <body> tag

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: enter image description here

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>

Solution 1:

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

html elements load after Javascript file even though the <script> tag is at the bottom of the <body> tag

Solution 1:

Related

Recent Posts