CODEWITHSUNDEEP
javascripthtml
Alberto Martínez
Alberto Martínez

Reputation: 251

How to change text after X seconds? HTML

I want a text to change after three seconds once the user has clicked. I want that the user clicks and put some text in the screen (this already works) and after three seconds the text changes to nothing (""). The code I tried is:

JavaScript:

function almuerzo() {
    var date = new Date();
    var horas = date.getHours();
    var minutos = (date.getMinutes() < 10? '0' : '')+ date.getMinutes();
    document.getElementById("accion").innerHTML = horas + ":" + minutos + " Almuerzo";
}

function cambio() {
    var contador = 0;
    setInterval(cambio, 1000);
    contador++;
    if(contador == 3)
        document.getElementById("accion").innerHTML = "";
    }

HTML:

<h1 id="accion" class="t-accion"></h1>
<img src="img/almuerzo.png" class="i-almuerzo" height="100px" onclick="almuerzo()" onclick="cambio()" />

Upvotes: 2

Views: 9955

Answers (3)

R3tep
R3tep

Reputation: 12864

You can do that with only one function. First change the text and use setTimeout to remove the text after three seconds.

Like:

var timeout;
function changeText() {
  var elem = document.getElementById("accion");

  var date = new Date();
  var horas = date.getHours();
  var minutos = (date.getMinutes() < 10 ? '0' : '') + date.getMinutes();

  elem.innerHTML = horas + ":" + minutos + " Almuerzo";

  clearTimeout(timeout);
  timeout = setTimeout(function() {
    elem.innerHTML = "";
  }, 3000);
}

Upvotes: 5

Manu
Manu

Reputation: 396

The easiest I found is to just declare one function and erase the text in an anonymous function

function almuerzo() {
    var date = new Date();
    var horas = date.getHours();
    var minutos = (date.getMinutes() < 10? '0' : '')+ date.getMinutes();
    document.getElementById("accion").innerHTML = horas + ":" + minutos + " Almuerzo";

    setTimeout(() => {document.getElementById("accion").innerHTML = ""}, 3000);
}

Some explanations:

The point is cambio is a hand-made setInterval but you did some mistakes:

setInterval(cambio, 1000) cambio without () is an [Object: function] (do a typeof(cambio) & typeof(cambio()) to see the difference) so you're not calling the function you won't have the return value from its call !

Moreover, remember that setInterval make the execution of a function asynchronous, so in your code, it set contador to 0, then launch an other instance (if you had put brackets to cambio) then increments by 1 and leave the execution. The 2nd instance will set contador to 0 and launch another isntance and so on...

function cambio() {
    var contador = 0; 
    setInterval(cambio, 1000); /* relaunch asynchronously cambio, 
    reset contador to 0, then relaunch cambio, etc...*/

    contador++;                 // contador === 1

    if(contador == 3)           /* it will never be triggered
    because in each instance of cambio that will run in parallel,
    cambio value will be equal to 1 */
        document.getElementById("accion").innerHTML = "";

    }

Upvotes: 3

Aaron
Aaron

Reputation: 24812

You're trying to use recursion on the cambio function, but it reinitialize its contador variable each time it's called, so the contador == 3 condition will never be true.

I don't see the point in waiting 3 times for 1 second instead of 1 time for three seconds. If there is no additional action to be taken each second, just do your action after a single wait :

function cambio() {
    setInterval(function() {
        document.getElementById("accion").innerHTML = "";
    }, 3000);
}

If there is indeed a point which your code doesn't show yet, you will want to define your contador variable outside of the function scope. Moreover, the counter should be incremented before recursing, and no recursion should be done if the target value has been reached :

var contador = 0;
function cambio() {
    if(contador == 3) {
        document.getElementById("accion").innerHTML = "";
    } else {
        contador++;
        setInterval(cambio, 1000);
    }
}

Upvotes: 1

Related Questions