0

func2 funciona y desaparece después de 2 segundos, pero el primero func1 no funciona, no se muestra el botón que tengo escondido. Me funcionaba antes de que añadiera el otro javascript func2, pero ya no.

Éste es mi código:

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>

2
  • El código no está completo, al menos falta la parte html. Véase ejemplo mínimo verificable.
    – Rubén
    Commented el 20 mar. 2017 a las 0:00
  • @Rubén <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 10 seconds of loading the page.</p></div>
    – Kevin
    Commented el 20 mar. 2017 a las 0:09

2 respuestas 2

3

La respuesta de Jorhel es correcta: el problema que tienes es que estás asignando funciones al onload y entonces sólo se ejecutará la última porque sobreescribe las anteriores. Como alternativa a los métodos que pone en su solución, te diría que otra opción es que uses addEventListener. Algo como esto>

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

Al usar addEventListener para el método load en lugar de asignar funciones al onload, el código va a funcionar como quieres porque lo que hace es que pone las funciones en la cola de eventos (se ejecutarán en el orden en el que se asignan) en lugar de sobreescribirlas.

Cambiando tu código sólo un poco para sustituir el onload por el addEventListener quedaría así:

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>

2

aqui estás dandole un valor a onload con =

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

Y luego más adelante sobre escribes window.onload y le asignas otro valor

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

como esta ultima es precisamente lo ultimo que le asignas a onload, por eso es que funciona y la otra no, porque se nulifica.

No hay problema si haces lo siguiente:

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

o si ambos setTimeout tendrán el mismo valor, hacer lo siguiente:

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.