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;}
- 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"; }
- 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.
- Test your program with the new code. Your page should look like this: Sample