Hi there! I've been dabbling in learning JavaScript lately and thought it would be cool to create a basic clock. However, I'm running into an issue where I can't seem to update the values for the hours, minutes, and seconds. I tried using .innerHTML along with setInterval but it's not working as expected. Even in Chrome's inspector, it looks like the data is changing, but nothing happens on the display. Any suggestions or ideas on what might be going wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../css/style-clock.css">
<title>Clock</title>
</head>
<body>
<div class="container">
<div class="clock">
<span id="hours"></span>
<span id="mins"></span>
<span id="secs"></span>
</div>
</div>
<script src='../js/app-clock.js'></script>
</body>
</html>
JS:
const time = new Date();
function currentTime(){
var hour = time.getHours();
var minute = time.getMinutes();
var second = time.getSeconds();
document.getElementById("hours").innerHTML = hour;
document.getElementById("mins").innerHTML = minute;
document.getElementById("secs").innerHTML = second;
}
setInterval(currentTime,500);