Lesson Eleven: The Current Code

  1. Your current CSS code should look like this:
    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: 550px; margin-top: 10px; }
    #b6 { margin-top: 10px; font-size: 20px; color: blue; }
  2. Your current JavaScript code should look like this:
    var event1;
    event1 = "488 Million Years Ago the Mollusks Appeared";
    var event2 = "250 Million Years Ago the Dinosaurs Appeared";
    var event3 = "65 Million Years Ago - Age of the Mammals";
    var event4 = "60 Million Years Ago - The Primates";
    var event5 = "5.2 Million Years Ago - The Hominids";
    var eventchoice;
    function historyevents(eventnumber) {
    eventchoice = eventnumber;
    if (eventchoice == 1) {
    button = document.getElementById("b1");
    button.value = event1; }
    else if (eventchoice == 2) {
    button = document.getElementById("b2");
    button.value = event2; }
    else if (eventchoice == 3) {
    button = document.getElementById("b3");
    button.value = event3; }
    else if (eventchoice == 4) {
    button = document.getElementById("b4");
    button.value = event4; }
    else {
    button = document.getElementById("b5");
    button.value = event5; }

  3. Your current HTML code should look like this:
    <!DOCTYPE html>
    <meta charset="utf-8">
    <title>Five Events in History</title>
    <link rel="stylesheet" type="text/css" href="histevents.css">
    <h1>Five Events in History</h1>
    <input type="button" id="b1" value="Click the Button to see Event One" onclick="historyevents(1);">
    <input type="button" id="b2" value="Click the Button to see Event Two" onclick="historyevents(2);">
    <input type="button" id="b3" value="Click the Button to see Event Three" onclick="historyevents(3);">
    <input type="button" id="b4" value="Click the Button to see Event Four" onclick="historyevents(4);">
    <input type="button" id="b5" value="Click the Button to see Event Five" onclick="historyevents(5);">
    <input type="button" id="b6" value="Reset" onclick="location.reload();">
    <script src="histevents.js"></script>

Lesson Twelve: Loading Images with JavaScript