Javascript contador que realiza contagem regressiva não funciona

DanJavascript · 22 de fevereiro de 2021

Olá pessoal, sou iniciante na programação, e enfim.. estou tento alguns problemas.. no exercicio proposto tenho q fazer um botão que ao ser apertado dispara um evento de contagem regressiva do numero inserido até 1, para isso usei a estrutura de repetição while(){} no entanto... nao está dando certo.

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>CONTAGEM PARES</h1> 
    
    <p> insira um numero:
        <input type="text" id="NumeroEntrado">
    </p>
    <p>
<input type="button" value="fazer contagem" onclick="contarPares()">

    </p> 
    <p>
    <h3 id="contador"></h3> 
</p>
<script>
 
function contarPares(){
var numero= Number(document.getElementById("NumeroEntrado"));
//if(numero==0||isNaN(numero)){alert("insira um numero válido")};
var i= numero;
while(i>1){contador.innerHTML="os numeros pares entre 1 e "+numero+"são:"+ i-2; }




}
</script>
</body>
</html>

Marcelo Calazans · 23 de fevereiro de 2021

@DanJavascript Olá colega.

O enunciado desse exercício, que deve ter sido proposto em aula, está meio estranho.

Não há como fazer uma contagem regressiva da forma que você está querendo usando um laço while, pelo simples motivo de que o laço é muito rápido, e você não verá a contagem, e sim apenas o último número, que neste meu caso é o zero (0).

Veja abaixo o que estou dizendo:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>    
 
<p>Numero</p>
<input type="number" id="numero-entrado" name="numero-entrado">  
<br> 
<input type="submit" value="Iniciar" onclick="contar()">

<p>
<div id="contador"></div>
</p>

<p></p>

<script>
function contar(){
var numero = Number(document.getElementById('numero-entrado').value);
//
while(numero >= 0){     
     document.getElementById("contador").innerHTML = numero;
     numero--;
}
}
</script>

</body>
</html>

Mas você deve estar pensando, como não vejo, ele não está contando, mas está sim.

Veja abaixo o mesmo exemplo com alert parando a execução, e veja que ele conta, mas é tão rápido que você não podia ver antes:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>    
 
<p>Numero</p>
<input type="number" id="numero-entrado" name="numero-entrado">  
<br> 
<input type="submit" value="Iniciar" onclick="contar()">

<p>
<div id="contador"></div>
</p>

<p></p>

<script>
function contar(){
var numero = Number(document.getElementById('numero-entrado').value);
//
while(numero >= 0){     
     alert(numero);
     document.getElementById("contador").innerHTML = numero;
     numero--;
}
}
</script>

</body>
</html>

O correto para ver a contagem regressiva, seria esse exemplo abaixo:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>    
 
<p>Numero</p>
<input type="number" id="numero-entrado" name="numero-entrado">  
<br> 
<input type="submit" value="Iniciar" onclick="contar()">

<p>
<div id="contador"></div>
</p>

<p></p>

<script>
function contar(){
  var numero = Number(document.getElementById('numero-entrado').value);
  //
  var x = setInterval(function() {
  //
  document.getElementById("contador").innerHTML = numero;  
  numero--;
  if (numero < 0) {
    clearInterval(x);
  }
  //
}, 1000);
}
</script>

</body>
</html>

Veja com calma os 3 exemplos que coloquei para entender, e se caso fica alguma dúvida, fique à vontade em perguntar.

Abraços colega.

DanJavascript · 23 de fevereiro de 2021

@Marcelo Calazans obrigado colega, ainda nao tenho muito conhecimento com o metodo que você utilizou mas e colocando o laço for(){}, será q dá certo? vou tentar aqui ...mas de qualquer forma obrigado