Step 4

The <script> tag

  • It will be difficult to read more than a few (JavaScript) statements for the onclick attribute of the zzz button. Therefore, it is not advisable to write event handlers (JavaScript statements that are executed in response to an event) using attributes of button (or other HTML) elements.

  • A better approach is to put all JavaScript statements (code) in a dedicated section, group the statements (about handling an event) in a function, and call that function in the onclick event.

  • Add the following section to the end of the <body> element (right before the closing </body> tag):

<script>
  function handleOnClickEvent() {
    window.alert('buzz!');
    console.log('fizz!');
  }
</script>

The <script> element is used to include JavaScript in HTML.

  • Update the onclick attribute of the zzz button:
<button onclick="handleOnClickEvent()">zzz</button>
  • Save the index.html file; refresh the index page in the browser. Then, click on the zzz button; it must work as before (producing alert window and console message).