Event listener lab: Click counter

70.3% Acceptance

In this lab you'll be building a simple click counter using JavaScript

Your application will include a button and a display area (paragraph). Every time the button is clicked, a counter will increase by 1, and the updated count will be shown in the display area.


  1. Identify Elements: Locate the button and the paragraph in your HTML using their IDs. These are the elements you'll interact with in your JavaScript code.

2.Initialize Counter: Set up a variable in your JavaScript to keep track of the number of clicks. Initially, this will be set to zero.

  1. Create Function to Update Counter: Write a JavaScript function that increases the counter each time it's called. This function should also update the paragraph element with the new counter value.

  2. Attach Event Listener: Connect an event listener to the button. This listener should respond to 'click' events by calling the function you wrote to update the counter.

By the end of these steps, every time you click the button on your web page, the number displayed in the paragraph should increase by 1, indicating the total number of button clicks. This exercise helps understand the basics of user interactivity using JavaScript.