Step 3

The onclick event

  • When we click on the zzz button, we want something to happen!

  • Update the button tag and add the following onclick attribute:

<button onclick="window.alert('buzz!')">zzz</button>

HTML attributes provide additional information about HTML elements. They are always specified in the start tag, usually in name/value pairs like: name="value".

  • Save the index.html file; refresh the index page in the browser. Then, click on the zzz button. You must see a pop-up alert window saying buzz!

The window.alert('buzz!'); is a JavaScript statement. The window object represents an open window in a browser.

  • Let's add another statement to onclick event of the zzz button.
<button onclick="window.alert('buzz!'); console.log('fizz!')">

  • Save the index.html file; refresh the index page in the browser.

  • In your browser, open "Developer Tools" (typically, you can do this by right-click and selecting "Inspect") and find the "Console" tab.

  • Now, click on the zzz button. In addition to a pop-up alert window with the message buzz!, you must see the message fizz! printed on the console.

console.log() provides access to the browser's debugging console.