setTimeout doesn't work in this clock project

user_13787990 0
Viewed 38

For some reason, the timeout doesn't work, and the clock numbers stay the same as they started initially. I tried setInterval() but it didn't work either.

Code below, or see it here: codepen

// Variables
var hourN = document.getElementById("hoursD");
var minuteN = document.getElementById("minutesD");
var secondN = document.getElementById("secondsD");
var hour, minute, second = 0;
var date = new Date();

// Functions
function refresh() {
  
  hour = date.getHours();
  minute = date.getMinutes();
  second = date.getSeconds();
  hour > 12 ? hour = hour - 12 : hour;
  
  hourN.innerText = hour;
  minuteN.innerText = minute;
  secondN.innerText = second;
  
  var t = setTimeout(function(){ refresh(); }, 1000);
  
}

refresh();

<h1 align="center">
    <span id="hoursD"></span> : <span id="minutesD"></span> : <span id="secondsD"></span>
  </h1>
html
3 Answers

date still holds the initial value. you should update it inside refresh.

// Variables
var hourN = document.getElementById("hoursD");
var minuteN = document.getElementById("minutesD");
var secondN = document.getElementById("secondsD");
var hour, minute, second = 0;
var date = new Date();

// Functions
function refresh() {
  
  date = new Date();
  hour = date.getHours();
  minute = date.getMinutes();
  second = date.getSeconds();
  hour > 12 ? hour = hour - 12 : hour;
  
  hourN.innerText = hour;
  minuteN.innerText = minute;
  secondN.innerText = second;
  
  var t = setTimeout(function(){ refresh(); }, 1000);
  
}

refresh();

By the way.. setInterval would be better for this function.

user_57500160

You have to use setTimeout here. Also your css remove h1 from viewport. Also you have to update your date value inside of refresh function.

// Variables

var hourN = document.getElementById("hoursD");

var minuteN = document.getElementById("minutesD");

var secondN = document.getElementById("secondsD");

var hour, minute, second = 0;


// Functions

function refresh() {

  var date = new Date();

  hour = date.getHours();

  minute = date.getMinutes();

  second = date.getSeconds();

  hour > 12 ? hour = hour - 12 : hour;

  hourN.innerText = hour;

  minuteN.innerText = minute;

  secondN.innerText = second;


}
setInterval(function(){ refresh(); }, 1000);

* {

  padding: 0;

  margin: 0;

  box-sizing: border-box;

}

body {


  padding-bottom: calc(50% - 200px);

}

h1 > span {

  color: black;

}

h1 {

  color: #2979ff;

}
user_19042920

Move the date variable inside of the refresh() function so that it gets the current date every second. Otherwise it's only going to return the date the user had when they first loaded the script.

Also, I would move the timer outside of the refresh() function and use setInterval to call it.

Here's the updated code:

var hourN = document.getElementById("hoursD");
var minuteN = document.getElementById("minutesD");
var secondN = document.getElementById("secondsD");
var hour, minute, second = 0;


// Functions
function refresh() {
  var date = new Date();
  hour = date.getHours();
  minute = date.getMinutes();
  second = date.getSeconds();
  hour > 12 ? hour = hour - 12 : hour;

  hourN.innerText = hour;
  minuteN.innerText = minute;
  secondN.innerText = second;
}

refresh();
setInterval(function(){ refresh(); }, 1000)
user_137843180
Related