Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

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

<title>Simple Quiz</title> <script type="text/javascript" src="script.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <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, 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
                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
                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
                Aug 22, 2013 at 0:01
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
– Lepidosteus
                Aug 21, 2013 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, 2013 at 23:48
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/…
– Juraj Martinka
                Feb 9, 2022 at 20:13
To simplify, thats how the callback should look like:
window.onload = (event) => {
  console.info('Page is fully loaded');
  removeQuestions();
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.