How can I run HTML code before JavaScript?

Question

My question might look simple, I've searched the web and found no answer. I had the browser run my <h1> HTML tag first, and then do the JavaScript file. But the result is that JavaScript is blocking my HTML code and runs the prompt() first. I hope you can help me find a solution and learn something new.

This is my HTML code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Keyless Car</title>
</head>
<body>
    <h1>Hello there, this is your Keyless Car.</h1>
    <script type="text/javascript" src="Keyless car.js"></script>
</body>
</html>

This is my JavaScript code:

var age = prompt("How old are you?");

if (Number(age) < 18){
    alert("Sorry, you are too young to drive this car. Powering off");
}
else if (Number(age) === 18){
    alert("Congratulations on your first year of driving. Enjoy the ride!");
}
else{
    alert("Powering On. Enjoy the ride!");
}

I tried putting the <script> in the <head>, at the end of the <body>, after the <body>, and also after the </html>, but the same issue is still popping up.

Robert Bradley · Accepted Answer · 2022-10-28T15:58:47.240

0

Use window.onload, and put your javascript in a function, and then slightly delay the function with setTimeout():

window.onload = setTimeout(function() {
    var age = prompt("How old are you?");

    if (Number(age) < 18){
        alert("Sorry, you are too young to drive this car. Powering off");
    }
    else if (Number(age) === 18){
        alert("Congratulations on your first year of driving. Enjoy the ride!");
    }
    else{
        alert("Powering On. Enjoy the ride!");
    }
}, 10); // Delay only 10 milliseconds.

It's just delaying it for 10 milliseconds, which is 1/100 of a second; practically instant.
However, that is on Chrome. I have not tested it on any other browsers, but I think it should work on pretty much all browsers.

edited Oct 28 '22 at 15:58

answered Oct 27 '22 at 18:19

Robert Bradley

548
2
21

1

Thank you so much, I tried your solution, putting a small delay in script totally worked. Are there any other more logical ways for browser to understand it should read html before JavaScript? Because putting a delay doesn't seem so optimized for big projects. – ArshiaZ Oct 28 '22 at 00:44
No problem. And yeah, it's certainly not the best, I'm still trying to find a better way, so I'll get back to you if I find one. – Robert Bradley Oct 28 '22 at 14:10
@ArshiaZ See the solutions in the linked question (which include using setTimeout). – Barmar Oct 28 '22 at 15:23
I've added a `window.onload`, which made it possible to functionally only have the delay be 1/100 of a second, but I have not found a way that doesn't involve `setTimeout()`. – Robert Bradley Oct 28 '22 at 15:50
Do _not_ introduce a magic delay into your code. This will introduce a race condition that will haunt you. Configuring a callback for the `onload` event should suffice (without the arbitrary delay). If you genuinely need to wait for an asynchronous event to complete before running your function, link your function directly to the completion of that event. – Ben Aston Oct 28 '22 at 16:05
@BenAston, the `onload` did not suffice; it failed about 1/3 of the time. Although I would love to link my function directly to the completion of another event, the "event" is actually the page loading, so I'm not sure how I would do that. Could you expound on that? – Robert Bradley Oct 28 '22 at 16:21
I am somewhat unpracticed in javascript, so if you could explain a better way of "configuring a callback for the `onload`", I would really appreciate it. – Robert Bradley Nov 04 '22 at 17:12

How can I run HTML code before JavaScript?

1 Answers1