How to change text after X seconds? HTML

Question

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()" />

Answer 1

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);
}

Answer 2

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 = "";

    }