Javascript Code not showing desired output if run through vs code

Question

I have tried many times it is not showing the desired output if i run it through vs code but this code works well and produces desired output if i run it in replit online code editor Someone Please help!

let age = prompt("enter your age")
age = Number.parseInt(age)
if (age <= 10) {
  document.body.style.background = "red"
}
else if (age > 10 && age <= 18) {
  document.body.style.background = "yellow"
}

else {
  document.body.style.background = "green"
}

You forgot to specify what the desired and the undesired output are exactly. — CherryDT, Sep 09 '22 at 15:21
Yeah, we need to know what you're seeing and what you think is right and wrong — phuzi, Sep 09 '22 at 15:22
desired output is that it turns the bg color to red if the age entered is less than or equal to 10 , if age is greater than 10 and also less than or equal to 18 it should turns my webpage bg color to yellow and if it is greater than 18 then it should turn my webpage bg color to green — Yash Yadav, Sep 09 '22 at 15:24
Code works if i run it in replit but does not work if i run it in vs code — Yash Yadav, Sep 09 '22 at 15:33
No it is a seperate javascript file and i link it using script src attribute — Yash Yadav, Sep 10 '22 at 12:32

qrsngky · Answer 1 · 2022-09-10T13:40:07.013

I can reproduce your issue this way:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <script src="./test.js"></script>
</head>
<body>
</body>
</html>

The problem is, in order to run your script, it will pause the parsing, and when your script is run, only the elements it has encountered are available. So basically, it has only parsed these parts:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <script src="./test.js"></script>

It has not parsed a <body> tag for it to process at that point. So, when it attempts to get document.body, the result is null, and trying document.body.style results in an error, so it throws an error (Uncaught TypeError: Cannot read properties of null (reading 'style') at test.js:11:17) instead of changing the color.

To solve this, you may either move your script somewhere after <body>, for example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
</head>
<body>
    <script src="./test.js"></script>
</body>
</html>

Or add defer attribute to your script tag so that the parser waits for the body to be finished.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <script src="./test.js" defer></script>
</head>
<body>
</body>
</html>

There is also async attribute for a script that won't pause the parser immediately, but in this case it's not appropriate (it introduces a race condition; but then the parser will win, it's quicker to reach <body> than to request a separate js file)

This thread describes the difference between regular script, async and defer: https://stackoverflow.com/a/39711009/4225384

Javascript Code not showing desired output if run through vs code

1 Answers1