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:

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

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>

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

In your JavaScript file replace your previous button code:

button = document.getElementById("b1");
button.value = event1;

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

Coding

Lesson Thirteen: Writing to Other Elements - innerHTML