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

Possible duplicate of [executing javascript after X seconds](http://stackoverflow.com/questions/8252638/executing-javascript-after-x-seconds) — Kris, Apr 20 '17 at 09:41
Please avoid calling two functions on click of image which i can see the above code. — Naveen K N, Apr 20 '17 at 09:43

score 5 · Accepted Answer · edited May 02 '17 at 17:43

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

Manu · Answer 2 · 2017-04-21T08:25:41.140

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

    }

It call the function cambio every 1 second. You can use this syntax to `setInterval(function () { cambio(); }, 1000)` — R3tep, Apr 20 '17 at 12:57
Oh ok nice, just thought you were saying cambio without parenthesis still works inside setInterval() thanks for the explanations anyway — Manu, Apr 20 '17 at 13:41

score 1 · Answer 3 · answered Apr 20 '17 at 09:41

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

doesn't set text to nothing, it remains as it was onclick, if the counter works fine shouldnt be disappearing in 3 seconds? — Alberto Martínez, Apr 20 '17 at 09:46
@almartinez it should. Make sure you're using the last version of my answer, I edited a few mistakes — Aaron, Apr 20 '17 at 09:47

How to change text after X seconds? HTML

JavaScript:

HTML:

3 Answers3