CODEWITHSUNDEEP
javascripthtmlcss
St34ky
St34ky

Reputation: 11

My clock won't work. Why isn't InnerHTML not updating?

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>

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

Upvotes: 1

Views: 625

Answers (4)

bron
bron

Reputation: 1548

Move the "new Date()" line into the function to set the time each interval to the current time.

function currentTime(){
  const time = new Date();
  var h = time.getHours();
  var m = time.getMinutes();
  var s = time.getSeconds();
  document.getElementById("hours").innerHTML = h;
  document.getElementById("mins").innerHTML  = m;
  document.getElementById("secs").innerHTML  = s;
}
setInterval(currentTime,500);

Upvotes: 0

Amit Sharma
Amit Sharma

Reputation: 717

The problem seems to be the positioning of the const time.

The thing is, the output of Date() will be set to const time at the beginning of the script and the currentTime() function will keep on updating the same values over and over again. So, in your case, the values were actually getting updated but since they were the same values, you couldn't make the difference.

Solution: To make it work, you need to update the value of the const time every time you need to update the value of the innerHTML. You simply need to do the following change:

JS:

function currentTime(){
const time = new Date();
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);

Upvotes: 0

Muthukumar Anbalagan
Muthukumar Anbalagan

Reputation: 1178

You have decelerated outside of function that is called intervals.

CodePen Example

HTML

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

setInterval(function(){
  const time = new Date();
  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;
}, 500);

Upvotes: 0

Michael Rodriguez
Michael Rodriguez

Reputation: 2176

You were close. Since you define time outside of the interval function, it only gets assigned once. Just move time into the currentTime() function like this:

function currentTime() {
  const time = new Date();
  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);
<div class="container">
  <div class="clock">
    <span id="hours"></span>
    <span id="mins"></span>
    <span id="secs"></span>
  </div>
</div>

Upvotes: 2

Related Questions