Lesson Fifteen: The Onclick Property

So far you have been using the onclick event (property) only with the button object. However, many other elements (objects) also have onclick as a property. All of these elements, as well as others, have onclick as a property: h1, p, li, img. Make these changes to your HTML file to call the applicable function:

<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);" >

Test your program with the new code. Click the compass logo to call the function and write the event:

Change your p, li, and h1 elements as shown below:

<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>

Change your JavaScript file as shown below:

if (eventchoice == 1) {
h1 = document.getElementById("h1");
h1.innerHTML = event1;
img = document.getElementById("i1");
img.src = image1;}
else if (eventchoice == 2) {
li = document.getElementById("li1");
li.innerHTML = event2;

Make this change in your CSS files to emphasize the li element:
```
#b6, #b7, #b8, #li1{ margin-top: 10px; font-size: 20px; color: blue; }
```
You should now be able to click any element and the applicable event will be written: Sample

Lesson Sixteen: Adding a Loop

Coding

Lesson Fifteen: The Onclick Property