Lesson Seventeen: Adding a Loop Continued

Make these changes to your JavaScript file:

  1. Add a value of to the eventchoice variable with this code: var eventchoice = 0;
  2. Delete the eventnumber parameter from the historyevents function. The new line of code should look like this: function historyevents() {
  3. Add this code just under the function statement eventchoice = eventchoice + 1; This code will add 1 to the eventchoice variable each time the onclick method is executed.
  4. Note: The eventchoice variable is known as a global variable because it resides outside of any function. When used within a function it is refered to as a local variable.
  5. The code for your HTML file is shown below:
    <body>
    <h1>Five Events in History</h1>
    <input type="button" id="b1" value="Next Event" onclick="historyevents();" >
    <input type="button" id="b6" value="Reset" onclick="location.reload();">
    <input type="button" id="b7" value="Design Two" onclick="changedesign1();" >
    <input type="button" id="b8" value="Design Three" onclick="changedesign2();" >
    <h1 id="h1" onclick="historyevents();">
    <img id="i1" src="images/compass2.png" alt="History Tree Compass Image" onclick="historyevents();">
    <script src="histevents.js">
    </body>


  6. The JavaScript code for the histortevents() function should look like this:
    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;}
    }

    Test your program with the new code. Your page should look like this: Sample

Lesson Eighteen: Finishing the Loop