Lesson Sixteen: Adding a Loop

So far you have been using multiple buttons, images, and elements to display historical events. However, a more efficient method is to use only one button, image, or element to display the events. To call more than one function with a single button or other object you will need to use a loop.

1. Make these changes to your HTML file to reduce the number of elements:
2. Delete all of the img elements that are shown in blue, and also, remove the 1 parameter from the historyevents (1) function call.

   <img id="i1" src="images/compass2.png" alt="History Tree Compass Image" onclick="historyevents(1);">
   <img id="i2" src="images/compass2.png" alt="History Tree Compass Image" onclick="historyevents(2);">
   <img id="i3" src="images/compass2.png" alt="History Tree Compass Image" onclick="historyevents(3);">
   <img id="i4" src="images/compass2.png" alt="History Tree Compass Image" onclick="historyevents(4);">
   <img id="i5" src="images/compass2.png" alt="History Tree Compass Image" onclick="historyevents(5);">

3. Delete all of the p, and li elements that are shown in blue, and also remove the parameter 1 from the historyevents(1) function call. Also delete the text of the h1 element.

   <h1 id="h1" onclick="historyevents(1);">Event One</h1>
   <li id="li1" onclick="historyevents(2);">Event Two</li>
   <p id="p3" onclick="historyevents(3);" >Event three</p>
   <p id="p4" onclick="historyevents(4);">Event four</p>
   <p id="p5" onclick="historyevents(5);">Event five</p>

4. Delete all of the input elements that are shown in blue, and also remove the parameter from the historyevents function call. Also change the text of the remaining input element to Next Event.

   <input type="button" id="b1" value="Next Event" onclick="historyevents(1);">
   <input type="button" id="b2" value="Event two" onclick="historyevents(2);">
   <input type="button" id="b3" value="Event three" onclick="historyevents(3);">
   <input type="button" id="b4" value="Event four" onclick="historyevents(4);">
   <input type="button" id="b5" value="Event five" onclick="historyevents(5);">

5. Now move the h1 and img elements under the input elements.
6. The code for the HTML, and JavaScript historyevents() function is shown in lesson 17.

Lesson Seventeen: Adding a Loop Continued