02 button

View the source code.

This page has two buttons. For the first button, we set the click handler to myFunction(), which is defined in a <script> element. For the second button, we define the handler code in the onClick attribute itself.

When a web page is loaded, the browser creates a Document Object Model (DOM) of the page. The DOM is a tree of objects. The root object in the tree in named document. The document object has a getElementById method, which returns an Element object.

The click handler for the Try it button sets the innerHTML property for each of three Element objects. The click handler for the Try something else button sets the innerHTML property for the Element that represents the <p id="par3"> element.

<p id="par1">filler</p>
<p id="par2">filler</p>
<p id="par3">filler</p>

<button onclick="myFunction()">Try it</button>

<button onclick="getElementById('par3').innerHTML=Date()">Try something else</button>

<script>
  function myFunction() {

    document.getElementById("par1").innerHTML = "Hello";

    var p2 = document.getElementById("par2");
    p2.innerHTML = "Steve";

    var d = document;
    var p3 = d.getElementById("par3");
    p3.innerHTML = "Perry";
  }
</script>