Lesson Nine: The Button Object

  1. The button object allows the user to decide when to execute your JavaScript code.
  2. Enter this code into your HTML file (histevents.html) under the h1 element to create a button:
    <input type="button" id="b1" value="Click the Button to see Event One" onclick="historyevents(1);">

  3. The input tag identifies the input element.
  4. The input element can contain various objects that are identified by the type attribute. In this case the type is a button object.
  5. The id attribute identifies the button object. In this case the button has the id of b1.
  6. The value attribute contains the text that is to be shown in the button element.
  7. The onclick attribute calls a function when the button is clicked. In this case the onclick event (an event occurs when the button is clicked) calls your JavaScript historyevents function. Notice also that the parameter of 1 is being passed to your function.
  8. Substitute this code for the document.write(event1); } code in your JavaScript file (just below this code: if (eventchoice == 1) }).
    button = document.getElementById("b1");
    button.value = event1; }

    The above code is explained in the next lesson.

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

Lesson Ten: The getElementById() Function/Method