How to change html content, when the page has fully loaded

Question

So, I have this HTML document

<!DOCTYPE html>
<html>
  <head>
  <title>TestPage</title>
    <script src="script.js"></script>
  </head>
  <body>
    <p id="test">Sample text</p>
  </body>
</html>

With this JS file

window.addEventListener("load", MyFunction());
function MyFunction(){
  document.getElementById("test").innerHTML = "it worked";
}

and ofcourse this doesn't work (the text isn't changed), since it loads the script before it actually loads the <p id="test"></p> element (I think). It may seem strange, but I want to change the content of some elements, after everything has loaded. I have searched, but to no avail. I'm missing something obvious here probably, but I can't seem to figure it out. Any advice would be appreciated!

You are immediately executing `MyFunction`, replace `MyFunction()` with `MyFunction` — Yvo Cilon, Oct 15 '15 at 11:57
also you shouldn't use a captial letter in My, because these are usually only used for classes (or javascript's weird prototype system) — Florian Wendelborn, Oct 15 '15 at 12:02

score 6 · Accepted Answer · answered Oct 15 '15 at 11:57

6

You're calling the function in the setup for your "load" event.

Did you mean:

window.addEventListener("load", MyFunction);

??

answered Oct 15 '15 at 11:57

spender

117,338
33
229
351

This is the correct answer, remove the brackets in your event hander – Vitani Oct 15 '15 at 12:01
Oh my, that's it. My apologies for missing it! Thank you! (I can only accept your answer in a couple of minutes though, will do!) – Spike de Held Oct 15 '15 at 12:01

score 1 · Answer 2 · edited May 23 '17 at 12:22

1

Try:

window.onload = function () { 
    MyFunction() 
}

function MyFunction(){
    document.getElementById("test").innerHTML = "it worked";
}

Source: Execute Javascript When Page Has Fully Loaded

edited May 23 '17 at 12:22

Community

1
1

answered Oct 15 '15 at 12:00

Friwi

482
3
13

score -1 · Answer 3 · answered Oct 15 '15 at 12:03

-1

Simply add this to your body tag :

<body onload=myFunction()>

function myFunction(){
      document.getElementById("test").innerHTML = "it worked";
}

answered Oct 15 '15 at 12:03

Vaibhav Sah

142
1
10

How to change html content, when the page has fully loaded

3 Answers3