0
Hello, I started studying Javascript a little while ago, and I always get excited when I go to mess with kk functions, I’m trying to create a stopwatch with JS and HTML, but when I create the function of the timer numbers with setInterval it doesn’t work but if I put an Alert with something inside, the button works
in the tutorial I was watching, when I hit the START button at least the 00 should turn 0.
I’ll put all the code here, but I believe that what really matters in this error is what is in the script tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crônometro JS</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<header style="background: #222; padding-top:10px;">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1 style="color: #fff;">Crônometro Simples</h1>
</div>
</div>
</div>
</header>
<main>
<section>
<div class="container">
<br/><br/>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 text-center" style="background: #141414;">
<p style="color: #fff; font-size: 45pt; margin-bottom: 0px;">
<span id=" timerHoras ">00</span> :
<span id="timerMinutos ">00</span> :
<span id="timerSegundos ">00</span>
<span id="timerDecimos "></span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<br />
<button id="btnIniciar" onclick="iniciarCronometro();" style="width: 100% ">INICIAR</button><br>
<button id="btnZerar" onclick="zerarCronometro();" style="width: 100% ">ZERAR</button>
</div>
</div>
</div>
</section>
</main>
<script>
function iniciarCronometro() {
var timerHoras = document.getElementById("timerHoras");
var timerMinutos = document.getElementById("timerMinutos");
var timerSegundos = document.getElementById("timerSegundos");
var timerDecimos = document.getElementById("timerDecimos");
var h = 0;
m = 0;
s = 0;
d = 0;
cronometro_id = setInterval(function() {
timerHoras.innerHTML = h;
timerMinutos.innerHTML = m;
alert("oi");
timerSegundos.innerHTML = s;
timerDecimos.innerHTML = d;
function zerarCronometro() {
}
}, 100)
}
</script>
</body>
</html>
Your code has some errors and needs to be fixed: 1) Do not use space when defining the "ID" attribute in HTML elements; 2) Do not create a function
zerarCronometrowithin asetInterval. That means every 100ms, a new functionzerarCronometrowill be created. This is bad for performance and project logic; 3) When you use the Bootstrap 4 (or lower), must - obligatorily - load the jQuery before. 4) Correctly state the variables:m,sandd.– Valdeir Psr