Javascript won't affect HTML element unless below it [duplicate]

Question

If I'm trying to affect an HTML element with a script (getElementById) it only works if the script comes after the element. Isn't javascript code usually all at the top of the HTML doc? For example:

Why does this work:

<!DOCTYPE html>
<html>
<body>
<p id="helloMessage"> </p>
<script>
document.getElementById("helloMessage").innerHTML = "Hello, World!";
</script>
</body>
</html>

but this does not

<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("helloMessage").innerHTML = "Hello, World!";
</script>
<p id="helloMessage"> </p>
</body>
</html>

That's because, in the second snippet, when JavaScript starts executing, the element is not present in the document (DOM). That's why your JS code cannot modify it. You cannot eat a pizza until you have it. — 31piy
– 31piy, Commented Aug 15, 2018 at 15:12
HTML is parsed line by line by the browser. If the script is before, the HTML element does not exist yet when the script is executed. — Jeremy Thille
– Jeremy Thille, Commented Aug 15, 2018 at 15:14

brk · Accepted Answer · 2018-08-15 15:15:56Z

0

If the snippet is very specific snippet is placed before the element , then this line document.getElementById("helloMessage") will try to find an element from DOM whose id is helloMessage , since the element is not there it will not work

You can still put it before the html by putting this code inside window.onload

<html>

<body>
  <script>
    window.onload = function() {
      document.getElementById("helloMessage").innerHTML = "Hello, World!";
    }
  </script>
  <p id="helloMessage"> </p>
</body>

</html>

answered Aug 15, 2018 at 15:15

brk

50.3k10 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript won't affect HTML element unless below it [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related