window.onload not working for very simple page

Question

Hi I'm new to Javascript and I'm trying to get a function to remove some elements once the window has loaded.

Here is the HTML

<html> <head> <title>Simple Quiz</title> <script type="text/javascript" src="script.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Quiz</h1> <h2>Question</h2> <p id="question"></p> <form name="choices"> <fieldset> <!-- insert questions here dynamically via javascript! --> <label><input type="radio" name="choice" value="1st">First-class</label> <label><input type="radio" name="choice" value="2day">2-day Air</label> <label><input type="radio" name="choice" value="overnite">Overnight</label> </fieldset> </form> </body> </html>

The function removeQuestions() works fine when called in the console after the page has loaded but I can't seem to get it to work using the onload event for the window. Interestingly enough, it works on JSFiddle (found here) but not when I fire up the page locally in chrome. What am I not getting right? Thank you

Here is the script.js file:

// JS executed after window has been loaded function removeQuestions() { var choices = document.forms.choices.elements[0].children; // remove choices while (choices.length > 0) { var choice = choices[0]; choice.parentNode.removeChild(choice); } } window.onload = removeQuestions();

now this is a little off topic but why would you remove the elements on page load? just don't add them in your html. — cocco
– cocco, Commented Aug 21, 2013 at 23:41
I'm just using this as a learning exercise right now. It doesn't have any practical use whatsoever :) — Eugene Kim
– Eugene Kim, Commented Aug 21, 2013 at 23:43
you can also shorten your function without checking the length var c=document.forms.choices.elements[0]; while(c.children[0]){c.removeChild(c.children[0])} — cocco
– cocco, Commented Aug 21, 2013 at 23:57
and as your working on a quiz .. check out this one ...stackoverflow.com/a/18337257/2450730 the json varinte is complete and much better. — cocco
– cocco, Commented Aug 22, 2013 at 0:01

Lepidosteus · Accepted Answer · 2013-08-21 23:29:57Z

You are not assigning your function to window.onload, you are calling your function, then assigning the result to window.onload

Replace window.onload = removeQuestions(); with window.onload = removeQuestions;

The browser expects a callback function to be in onload, so that it can call it whenever the window is loaded.

window.onload = removeQuestions(); is equivalent to

var result = removeQuestions(); // undefined, the function does not return anything window.onload = result;

@EugeneKim: yes. See the first answer in this question for a simple exemple you can reproduce: Execute Javascript When Page Has Fully Loaded
Hrm I opened it in a new tab again and it works! Perhaps it wasn't working as a result of browser caching?
@Lepidosteus is this also my case? stackoverflow.com/questions/71606235/…

sziraqui · Accepted Answer · 2018-05-11 19:20:59Z

In my case it did not work because I had set window.onload in two scripts running on the same page. It took me time to realise this mistake because the first script had console.log messages but the second script did not have any. Browser loaded the second script after first script and my window.onload = somefunction was now set to a function without any console.log giveing me the impression that it is not working at all

Thanks for this! It was the exact same problem I was facing with the blogging platform I use: github.com/curiousprogrammer-net/curiousprogrammer.blog/pull/27/…

Benedict Lang · Accepted Answer · 2023-03-15 14:50:51Z

To simplify, thats how the callback should look like:

window.onload = (event) => { console.info('Page is fully loaded'); removeQuestions(); };

Collectives™ on Stack Overflow

window.onload not working for very simple page

3 Answers 3

4 Comments

1 Comment

Comments

Linked

Hot Network Questions