How to invoke countdown every click on the button?

Question

I want to develop something simple, but it’s making me frustrated.

I will try to express myself in the best possible way.

To simplify things around here, I’m only bringing as an example a randomized Photo Gallery, that by clicking the button "Press!" , should display some random photo on a div so-called id='fig'.

But! Together you will have a countdown, to clean this id='fig' after 5 seconds. Getting the div released for a new subsequent sample.

My problem is in unifying the two distinct functions, to give that elegant air.

To image randomization + the countdown, and show both at the same time.

I confess that I am not succeeding, despite my efforts.

To illustrate the obstacle, I have developed some examples codes. They are:

Randomize Photo

    <!--
    var slide = ["procurando_dory.jpg","big_buck_bunny.jpg","madagascar_2.jpg","monstros_sa_2.jpg"];

    function clic() {
        var randomize = Math.floor((Math.random() * slide.length));
        document.getElementById('fig').innerHTML = '<img src="https://sites.google.com/site/mplayerplugin/repositorio/' + slide[randomize] + '" />';
    }
    -->

<center>

    <div id="fig"> &nbsp; </div>

    <span id="txt"> &nbsp; </span>

    <hr size="1" color="silver">

    <input type="button" onclick="clic()" value="Aperte!" id="troca" />

</center>

I have managed to do so in the form below:

Clear Photo

    <!--
    var slide = ["procurando_dory.jpg","big_buck_bunny.jpg","madagascar_2.jpg","monstros_sa_2.jpg"];

    function clic() {
        var randomize = Math.floor((Math.random() * slide.length));
        document.getElementById('fig').innerHTML = '<img src="https://sites.google.com/site/mplayerplugin/repositorio/' + slide[randomize] + '" />';
    window.setInterval(limpar, 5000); // Define os 5 segundos para limpar
    }

    function limpar() {
    document.getElementById('fig').innerHTML = ''; // Esvazia a div id='fig'
}
    -->

<center>

    <div id="fig"> &nbsp; </div>

    <span id="txt"> &nbsp; </span>

    <hr size="1" color="silver">

    <input type="button" onclick="clic()" value="Aperte!" id="troca" />

</center>

However, this is not in its full functionality the way, which I seek to do.

Still missing a countdown on id='txt'.

I want this function below:

Counter Regressive

    <!--

    var i = 5;
    var intervalo = window.setInterval(function() {
        document.getElementById('txt').textContent = i;
        i--;
    }, 1000);

    setTimeout(function() {
        clearInterval(intervalo);
    document.getElementById('fig').innerHTML = "";
    }, 5000);

    -->

<center>

    <div id="fig"> &nbsp; </div>

    <span id="txt"> &nbsp; </span>

    <hr size="1" color="silver">

<input type="button" onclick="clic()" value="Aperte!" id="troca" />

</center>

Enter together with the "snippet" code above.

In short, I want to put it all together in one function.

Answer 1

var slide = ["procurando_dory.jpg","big_buck_bunny.jpg","madagascar_2.jpg","monstros_sa_2.jpg"];
var i = 5; // Atribui o valor 5 a variável 'i'
function clic() 
{
   var randomize = Math.floor((Math.random() * slide.length));
document.getElementById('fig').innerHTML = '<img src=\"https://sites.google.com/site/mplayerplugin/repositorio/' + slide[randomize] + '\" />';
var intervalo = setInterval(function() // Aqui vai setar o loop  de 1 em 1 segundo.
{
    document.getElementById('txt').textContent = i; // envia o valor de i para o elemento com id 'txt'
    i--; // retira 1 de 'i' para a contagem regressiva
    if(i < 0) // se o valor de i for menor do que zero entra no if
    {
        clearInterval(intervalo); // parar o loop 'intervalo' que foi setado no inicio
        limpar(); // ativa a função limpar
        i = 5;// atribui o valor 5 a variável 'i' para poder recomeçar a contagem quando for pressionado o botão
        document.getElementById('txt').textContent = 0; // envia o valor 0 para o elemento com id 'txt'
    };
}, 1000); // Loop de 1 em 1 segundo (1000 milissegundos equivale a 1 segundo)
};

function limpar() 
{
	document.getElementById('fig').innerHTML = ''; // Esvazia a div id='fig'
};

<center>
    <div id="fig"> &nbsp; </div>
    <span id="txt"> &nbsp; </span>
    <hr size="1" color="silver">
    <input type="button" onclick="clic()" value="Aperte!" id="troca" />
</center>