-2
I imagine that my doubt is a little silly, but I’m seriously half a day trying to solve this challenge that I proposed and unfortunately I could not, remembering that I am a good beginner.
Well, I decided to create a chronometer using JS, where the user inserts the time in an HTML input number, the JS receives the value, converts to number, then the if subtracts 1 of the value every 1000 milliseconds and displays in HTML.
It turns out that it works if I determine the fixed value in the time variable and put onload calling the js function in the body tag. But using the input number with onclick calling the function on the button it only displays the first value of the countdown and hangs. I’m stuck there. One more thing, I tried to put the input inside a form but in this case it only flashed the number and disappeared the value.
function contador(){
let val = document.getElementById('valor');//essa variavel recebe o valor do form
let time = Number(val.value);//essa variavel converte o valor recebido do form para numero
if(time > 0){
time = time -1;
if(time == 0){
time = "FIM!"
}
}
tempo.innerText = time;
setTimeout("contador()", 1000);
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contador regressivo!</title>
<script src="main.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<h1>Digite abaixo um valor para o cronometro:</h1>
<input type="number" name="valor" id="valor">
<input type="submit" value="OK" onclick="contador()">
<div id="tempo">Preparar!</div>
</div>
</body>
</html>
Man, vlw to answer, it sure will help in my studies!
– Luiz Rodrigues