My clock isn't working - HTML/CSS/JS

Hello everyone,

Sorry if this topic is in the “annoying ones category”. I recently tried to learn JS and I’m trying to make a simple clock to work. Nothing too fancy I’d say but the problem is that I can’t update the values of my hours, minutes and seconds. I used .innerHTLM with a setInterval but it doesn’t work. In Chrome’s inspector it seems to try changing the datas but no… Any ideas guys ? 

<!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>

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);

Not a JS expert, but here’s something to try.

Your ‘time’ value is declared and set up once:

const time = new Date();

I think that means that ‘time’ never changes - it stays the same every time your clock updates.

Try moving that line inside your ‘currentTime()’ function.