Button Up explainer

Aim of the puzzle: Add an event listener to a button that changes the button’s text when the button is clicked.
Walk through of solution: JavaScript can be used to add event listeners to HTML elements.

Event listeners wait for a specific event, for example, 'click' (a full list of events can be found here), and then run a callback function when that event occurs.

In this puzzle, we are adding an event listener to both button1 and button2 that waits for the 'click' event. When the button is clicked, the callback function changes the .textContent property (which stores the text of the element), to 'Clicked!'.

Sample code solution:


let button1 = document.getElementById('button1');

button1.addEventListener('click', () => {
    button1.textContent = 'Clicked!';

let button2 = document.getElementById('button2');

button2.addEventListener('click', () => {
    button2.textContent = 'Clicked!';

Javascript Concepts: Document Object, document.getElementById(), .addEventListener(), Events, Event Listeners, .textContent