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!

Aside: The VSCode preview will not show this interaction. However, you can use the live server feature of the preview to open this page in the browser and observer interactivities.

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.