I wanted to make a really simple time tracker that runs in a browser. This is the simplest code I could come up with but I have problems with the click event. The problem is that the whole thing works but it starts on page load and I want it to start on click. Is there anything wrong with the implementation?
Here is my code:
let hours = 0;
let minutes = 0;
let seconds = 0;
function time() {
setInterval(function () {
if (seconds < 59) {
seconds++;
document.getElementById("timer").textContent =
hours + ":" + minutes + ":" + seconds;
} else if (minutes < 59) {
seconds = 0;
minutes++;
document.getElementById("timer").textContent =
hours + ":" + minutes + ":" + seconds;
} else {
hours++;
document.getElementById("timer").textContent =
hours + ":" + minutes + ":" + seconds;
}
}, 1000);
}
document.getElementById("button").addEventListener("click", time());body {
background-color: blanchedalmond;
}
div {
margin-top: 200px;
display: flex;
align-items: center;
flex-direction: column;
}
#timer {
min-height: 80px;
font-size: 4em;
}
h1 {
display: block;
}
#button {
margin-top: 50px;
width: 180px;
}<!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>
<script src="script.js"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="a">
<h1 id="header">You have been working for:</h1>
<time id="timer">0:0:0</time>
<button id="button" class="btn btn-primary">Track Time</button>
</div>
</body>
</html>The problem is that you call the time function when you add an event listener. In order to run the time function only when the button is clicked, just don't call the time function right away:
document.getElementById("button").addEventListener("click", time);
you have to use syntax like this because your click function is already triggered at the time adding a event listener.
document.getElementById("button").addEventListener("click", function(){
time();
});