0
``` You can have other elements and other styling to make it nicer, but that is up to you. ## The script ### Adding an event listener Add an event listener to the `script.js` file that listens for the DOM content to be loaded, upon which it adds an event listener to the button. Here's how that looks: ```js document.addEventListener("DOMContentLoaded", function() { let button = document.getElementById("trigger"); button.addEventListener("click", updateCounter); }); ``` `updateCounter` is the function that we will use to update the counter on the page. ### `updateCounter` function Inside this function we need to do the following: 1. Get the counter element from the page 2. Get its text value 3. Increment it by 1 4. Set the counter element's inner value to the new value Try doing this yourself before looking at the code below. {% hint style="info" %} Note that an element's inner text is always returned as a string, so you need to convert it to an integer. This can be done with the `parseInt` function: ```js parseInt("4324"); // returns 4324 ``` {% endhint %} ```js function updateCounter() { // query for the element let counterElement = document.getElementById("counter"); // get the counter value let count = parseInt(counterElement.innerText); // increment the counter value count++; // set the counter value counterElement.innerText = count; } ``` ### Test it out That's all we had to do. Now, test out the code by saving all files, reloading the page, and then clicking the button. The counter value should get incrememented: