Lesson Seventeen: Adding a Loop Continued

Make these changes to your JavaScript file:

Add a value of 0 to the eventchoice variable with this code: var eventchoice = 0;
Delete the eventnumber parameter from the historyevents function. The new line of code should look like this: function historyevents() {
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.
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.

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>

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:

Lesson Eighteen: Finishing the Loop

Coding

Lesson Seventeen: Adding a Loop Continued