Problem when executing functions with window.onload

0

func2 works and disappears after 2 seconds, but the first func1 does not work, the button that I have hidden is not displayed. It worked for me before I added the other javascript func2 , but not anymore.

This is my code:

window.onload = function() {
  setTimeout(func1, 2000);
};

function func1() {
  document.getElementById("hiddenbutton").className = "show";
}

window.onload = function() {
  setTimeout(func2, 2000);
};

function func2() {
  document.getElementById("div2").className = "hide";
}
.hide{
  display:none;
}

.show{
  display:block;
}
<div id="hiddenbutton" class="hide">
  <p>If the URL is correct, you can avoid waiting and touch the following button.</p>
  <form action="'.$longlink.'" method="post">
    <input type="submit" id="button-'.$shortenedlink.'" disabled="disabled" value="Redirect">
  </form>
</div>
<br>
<div id="div2" class="show">
  <p>The button will appear after 2 seconds of loading the page.</p>
</div>
    
asked by Kevin Andrews 19.03.2017 в 22:54
source

2 answers

2

here you are giving a value to onload with =

window.onload=function()
{
    setTimeout(func1, 10000);
}

And then later on you write window.onload and assign another value

window.onload=function()
{
    setTimeout(func2, 10000);    
};

like this last is precisely the last thing you assign to onload, that's why it works and the other does not, because it is nullified.

No problem if you do the following:

window.onload=function()
{
    setTimeout(func1, 10000);
    setTimeout(func2, 10000);  
    // aqui puedes añadir más funciones  
};

or if both setTimeout will have the same value, do the following:

    window.onload=function()
    {
        setTimeout(function(){
            func1();
            func2();
        }, 10000);
        // aqui puedes añadir más funciones  
    };
    
answered by 20.03.2017 в 03:31
2

The Jorhel answer is correct: the problem you have is that you are assigning functions to onload and then only the last one will be executed because it overwrites the previous ones. As an alternative to the methods you put in your solution, I would say that another option is to use addEventListener . Something like this >

window.addEventListener("load", function() { 
    // el código que quieres ejecutar
});

When using addEventListener for the load method instead of assigning functions to the onload , the code will work as you want because what it does is that it puts the functions in the event queue (they will be executed in the order in which they are assigned) instead of overwriting them.

Changing your code just a little to replace the onload with the addEventListener would look like this:

window.addEventListener("load", function() {
  setTimeout(func1, 2000);
});

function func1() {
  document.getElementById("hiddenbutton").className = "show";
}

window.addEventListener("load", function() {
  setTimeout(func2, 2000);
});

function func2() {
  document.getElementById("div2").className = "hide";
}
.hide{
  display:none;
}

.show{
  display:block;
}
<div id="hiddenbutton" class="hide">
  <p>If the URL is correct, you can avoid waiting and touch the following button.</p>
  <form action="'.$longlink.'" method="post">
    <input type="submit" id="button-'.$shortenedlink.'" disabled="disabled" value="Redirect">
  </form>
</div>
<br>
<div id="div2" class="show">
  <p>The button will appear after 2 seconds of loading the page.</p>
</div>
    
answered by 20.03.2017 в 04:39