Lesson Thirteen: Writing to Other Elements - innerHTML

Most of the time you will be writing to the more widely used elements like: p, h1, h2, h3, and li. For these elements you write to the innerHTML method of the element. For example: to input text to the paragraph element you would use this syntax: p.innerHTML = event1; Also you will need to get a reference to the particular paragraph that you want to update with this syntax: p = document.getElementById("p1");

Follow these steps to build the example:

  1. In your HTML file change the button lines as shown below:
    <input type="button" id="b1" value="Event one" 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);">

  2. In your HTML file add this code just above the Reset button:
    <p id="p1">Event one</p>
    <p id="p2">Event two</p>
    <p id="p3">Event three</p>
    <p id="p4">Event four</p>
    <p id="p5">Event five</p>

  3. Delete all of your existing code in the CSS file and input this code:
    body { background-color: tan; font-family: Georgia, "Times New Roman", Times, serif; line-height: 1.6em; }
    h1{ color: maroon; }
    input { color: darkblue; font-size: 25px; width: 150px; }
    img { width: 150px; }
    #b2 { margin-top: 10px; }
    #b3 { margin-top: 10px; }
    #b4 { margin-top: 10px; }
    #b5 { margin-top: 10px; }
    #b6 { margin-top: 10px; font-size: 20px; color: blue; }
    p { color: maroon; font-size: 25px; }

  4. In your JavaScript file replace your previous button code:
    button = document.getElementById("b1");
    button.value = event1;

  5. With the appropriate paragraph code:
    p = document.getElementById("p1");
    p.innerHTML = event1;

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

Lesson Fourteen: Changing Design