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, Aug 21 '13 at 23:41
I'm just using this as a learning exercise right now. It doesn't have any practical use whatsoever :) — Eugene Kim, Aug 21 '13 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, Aug 21 '13 at 23:57
and as your working on a quiz .. check out this one ...http://stackoverflow.com/a/18337257/2450730 the json varinte is complete and much better. — cocco, Aug 22 '13 at 00:01

score 27 · Accepted Answer · answered Aug 21 '13 at 23:29

27

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;

answered Aug 21 '13 at 23:29

Lepidosteus

11,779
4
39
51

2

Hrm, I'm still not getting any response from the page =/ – Eugene Kim Aug 21 '13 at 23:33
@EugeneKim: yes. See the first answer in this question for a simple exemple you can reproduce: [Execute Javascript When Page Has Fully Loaded](http://stackoverflow.com/questions/1033398/execute-javascript-when-page-has-fully-loaded) – Lepidosteus Aug 21 '13 at 23:41
Hrm I opened it in a new tab again and it works! Perhaps it wasn't working as a result of browser caching? – Eugene Kim Aug 21 '13 at 23:48
@Lepidosteus is this also my case? https://stackoverflow.com/questions/71606235/how-to-call-javascript-function-from-inside-onload-event-function – S. W. G. Mar 24 '22 at 20:04

score 5 · Answer 2 · answered May 11 '18 at 19:20

5

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

answered May 11 '18 at 19:20

sziraqui

5,763
3
28
37

Thanks for this! It was the exact same problem I was facing with the blogging platform I use: https://github.com/curiousprogrammer-net/curiousprogrammer.blog/pull/27/commits/fe121413844ea761f0eedffc94c6ccc18c8c7e6e – Juraj Martinka Feb 09 '22 at 20:13

Benedict Lang · Answer 3 · 2023-03-15T14:50:51.267

4

To simplify, thats how the callback should look like:

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

edited Mar 15 '23 at 14:50

answered Jan 30 '22 at 06:32

Benedict Lang

103
1
4

window.onload not working for very simple page

3 Answers3