What is the solution to this error?

Question

Here I have a Javascript file — I know the code is pretty messy right now, but I’m just coding some basic features and what not, then I will clean up the code. The page has three sections inside of those three individual sections are pictures. The pictures are supposed to change every 30 seconds. What is causing this error?

The error printed to the console: TypeError: undefined is not an object (evaluating 'document.images[1].src = images[alternate]’)

Here’s the code:

var alternate = 0;
var timerId;
var images = ["img/s1.jpg", "img/tourism.jpg", "img/s2.jpg", "img/shopping.jpg", "img/dining.jpg", "img/shopping2.jpg", "img/s3.jpg"]; // Image URLs in a image array

function startAnimation() {

    var now = new Date();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();
    var meridian = "AM";
    var time = hours + ":" + minutes + ":" + seconds + " " + meridian;

    if (hours < 12 && meridian == "PM" || hours == 0) {
        hours = hours + 12;
        meridian == "AM";
        time = hours + ":" + minutes + ":" + seconds + " " + meridian;
    } else if (hours > 12 && meridian == "AM") {
        meridian = "PM";
        hours = hours - 12;
        time = hours + ":" + minutes + ":" + seconds + " " + meridian;
    }
    //hours < 12 ? meridian : "AM";

    // comment on code here.
    if (minutes < 10) {
        minutes = "0" + minutes;
        time = hours + ":" + minutes + ":" + seconds + " " + meridian;
    }

    // comment on code here.
    if (seconds < 10) {
        seconds = "0" + seconds;
        time = hours + ":" + minutes + ":" + seconds + " " + meridian;
    }

    //alternate = (alternate == 0) ? 1 : 0; // Alternate images

    if (alternate == 0) {
        alternate = 3;
    } else {
        alternate = 0;
    }

    if (alternate == 1) {
        alternate = 2;
    } else {
        alternate = 1;
    }

    //document.images[0].src = images[alternate];  // Update image
    document.images[1].src = images[alternate];
    timerId = setTimeout("startAnimation()", 30000); // 30 second update

    if (images[alternate] == images[0]) {
        console.log(time + " " + images[0] + " has been loaded.");
    }

    if (images[alternate] == images[3]) {
        console.log(time + " " + images[3] + " has been loaded.");
    }

    if (images[alternate] != images[0] || images[alternate] != images[3]) {
        console.log("Please wait while the debugging process is in effect.");
    }

}

 startAnimation();

Answer 1

Here is the working code. The error has occurred : Wrong setTimeout() implementation and wrong assignment operator that you used.

var alternate = 0;
var timerId;
var images = [
  "img/s1.jpg",
  "img/tourism.jpg",
  "img/s2.jpg",
  "img/shopping.jpg",
  "img/dining.jpg",
  "img/shopping2.jpg",
  "img/s3.jpg"
]; // Image URLs in a image array

function startAnimation() {

  var now = new Date();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();
  var meridian = "AM";
  var time = hours + ":" + minutes + ":" + seconds + " " + meridian;

  if (hours < 12 && meridian == "PM" || hours === 0) {
    hours = hours + 12;
    meridian = "AM";
    time = hours + ":" + minutes + ":" + seconds + " " + meridian;
  } else if (hours > 12 && meridian == "AM") {
    meridian = "PM";
    hours = hours - 12;
    time = hours + ":" + minutes + ":" + seconds + " " + meridian;
  }
  //hours < 12 ? meridian : "AM";

  // comment on code here.
  if (minutes < 10) {
    minutes = "0" + minutes;
    time = hours + ":" + minutes + ":" + seconds + " " + meridian;
  }

  // comment on code here.
  if (seconds < 10) {
    seconds = "0" + seconds;
    time = hours + ":" + minutes + ":" + seconds + " " + meridian;
  }

  //alternate = (alternate == 0) ? 1 : 0; // Alternate images

  if (alternate === 0) {
    alternate = 3;
  } else {
    alternate = 0;
  }

  if (alternate == 1) {
    alternate = 2;
  } else {
    alternate = 1;
  }

  //document.images[0].src = images[alternate];  // Update image
  document.images[0].src = images[alternate];
  timerId = setTimeout(startAnimation(), 30000); // 30 second update

  if (images[alternate] == images[0]) {
    console.log(time + " " + images[0] + " has been loaded.");
  }

  if (images[alternate] == images[3]) {
    console.log(time + " " + images[3] + " has been loaded.");
  }

  if (images[alternate] != images[0] || images[alternate] != images[3]) {
    console.log("Please wait while the debugging process is in effect.");
  }

}

startAnimation();

<img src="" alt="">

Answer 2

Yo have few typos and mistakes:

meridian == "AM";

has to be meridian = "AM";

Also

timerId = setTimeout("startAnimation()", 30000);

Has to be:

setTimeout(startAnimation, 30000);