Lesson Fifteen: The Onclick Property

  1. 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: Sample

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


  3. 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;


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