Lesson Eighteen: Finishing the Loop

To establish a continues loop you must set the eventchoice variable to 0 after the last else statement. You can use this code after the img.src = image5; line: eventchoice = 0;}

  1. Your JavaScript file should now look like this:
    var event1;
    event1 = "488 Million Years Ago the Mollusks Appeared";
    var event2 = "250 Million Years Ago the Dinosaurs Appeared";
    var event3 = "65 Million Years Ago - Age of the Mammals";
    var event4 = "60 Million Years Ago - The Primates";
    var event5 = "5.2 Million Years Ago - The Hominids";
    var image1 = "images/mollusk1.jpg";
    var image2 = "images/dino.jpg";
    var image3 = "images/mammoth1.jpg";
    var image4 = "images/primates1.jpg";
    var image5 = "images/hominids1.jpg";
    var eventchoice = 0;
    function historyevents() {
    eventchoice = eventchoice + 1;
    if (eventchoice == 1) {
    h1 = document.getElementById("h1");
    h1.innerHTML = event1;
    img = document.getElementById("i1");
    img.src = image1;}
    else if (eventchoice == 2) {
    h1 = document.getElementById("h1");
    h1.innerHTML = event2;
    img = document.getElementById("i1");
    img.src = image2;}
    else if (eventchoice == 3) {
    h1 = document.getElementById("h1");
    h1.innerHTML = event3;
    img = document.getElementById("i1");
    img.src = image3;}
    else if (eventchoice == 4) {
    h1= document.getElementById("h1");
    h1.innerHTML = event4;
    img = document.getElementById("i1");
    img.src = image4;}
    else {
    h1 = document.getElementById("h1");
    h1.innerHTML = event5;
    img = document.getElementById("i1");
    img.src = image5;}
    eventchoice = 0;}
    }
    function changedesign1() {
    link = document.getElementById("link1");
    link.href = "histevents2.css";
    }
    function changedesign2() {
    link = document.getElementById("link1");
    link.href = "histevents3.css";
    }
  2. Notice the new code on line 40. This code sets the eventchoice global variable back to 0 and finishes your loop. Now the program takes the user back to the first event once the last event is written to the h1 element.
  3. Test your program with the new code. Your page should look like this: Sample

Lesson Nineteen: Introduction to Objects