Trying to apply setInterval in my clock unsuccessfully

Question

I teaching myself JavaScript and trying to code something everyday. I'm currently trying to build a simple clock, but I' can't seem to get my setInterval to work. I've tried positioning it in different places, but I think it belongs to the 'time' function so should be positioned after that. I'm wondering if it has something to do with how I am invoking the functions. I'm not completely clear on the when to invoke by which method yet. Guidance would sure be appreciated.

var dayTime = function() {
  // Create a new instance of the Date contructor function. 
  var date = new Date();

  var today = function() {
    // Create an array of weekday names
    var dayArray = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    // Extract the day. Will return a numeric representation.
    var dayIndex = date.getDay();

    // Step 4: Use weekday names array with weekday numeric to display text version of weekday.
    var today = dayArray[dayIndex];
    // Step 5: Place results into span on webpage
    var x = document.getElementById("day").innerHTML = today;
  }()

  var time = function() {

    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    // Set am or pm
    var amPm = hours < 12 ? "am" : "pm";

    // Set to 12 hour time format
    hours = hours > 12 ? hours - 12 : hours;

    // Convert midnight until 1am to 12
    hours = (hours == 0) ? 12 : hours;

    var y = document.getElementById("time").innerHTML = "Current time is " + hours + ":" + minutes + ":" + seconds + " " + amPm;

  }()
  setInterval(time, 1000);
}

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>

<body onload="dayTime();">
  <h1>Simple Date Exercise</h1>
  <p>Today is <span id="day"></span>
  </p>
  <p id="time">00:00</p>
</body>

</html>

`time` is undefined, since you're calling the function immediately. — SLaks, Nov 25 '16 at 16:54

score 2 · Answer 1 · answered Nov 25 '16 at 16:54

2

setInterval(time, 1000);

The first argument of setInterval needs to be a function. You are passing the time variable which contains …

var time = function() {
    // A bunch of statements but no return statement
}()

Since you follow it with (), you are calling it immediately, so the return value (undefined) is assigned to time.

Remove the (). Don't call the function immediately.

answered Nov 25 '16 at 16:54

Quentin

914,110
126
1,211
1,335

Thanks for the quick reply! I have to process this and practice, but it looks like what I need . – ArchieAtOrigins Nov 25 '16 at 17:07

score 0 · Answer 2 · answered Nov 25 '16 at 19:07

You can call dayTime() with setInterval() instead, and have a straight call to time(). Also, I'd set an interval lower than a second, to make sure it updates a bit more accurately to the second.

var dayTime = function() {
      // Create a new instance of the Date contructor function. 
      var date = new Date();
    
      var today = function() {
        // Create an array of weekday names
        var dayArray = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
        // Extract the day. Will return a numeric representation.
        var dayIndex = date.getDay();
    
        // Step 4: Use weekday names array with weekday numeric to display text version of weekday.
        var today = dayArray[dayIndex];
        // Step 5: Place results into span on webpage
        var x = document.getElementById("day").innerHTML = today;
      }()
    
      var time = function() {
    
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
    
        // Set am or pm
        var amPm = hours < 12 ? "am" : "pm";
    
        // Set to 12 hour time format
        hours = hours > 12 ? hours - 12 : hours;
    
        // Convert midnight until 1am to 12
        hours = (hours == 0) ? 12 : hours;
    
        var y = document.getElementById("time").innerHTML = "Current time is " + hours + ":" + minutes + ":" + seconds + " " + amPm;
    
      }();
    };
    setInterval(dayTime, 500);

  <h1>Simple Date Exercise</h1>
  <p>Today is <span id="day"></span>
  </p>
  <p id="time">00:00</p>

That works. I did this and have it working, although I still need to spend more time to fully appreciate why it's working! I have also adjusted the interval length. Appreciate the help. — ArchieAtOrigins, Nov 25 '16 at 21:57

Trying to apply setInterval in my clock unsuccessfully

2 Answers2