<p>This example adds an event listener to the buttons, and displays the button text when clicked.</p>

<button>Apples</button> 
<button>Bananas</button> 
<button>Peaches</button> 

<p class="text-display"></p>
//get our buttons from the DOM
const buttons = document.querySelectorAll('button')

// we'll also get the textOutput element, so we can append/display the text of the clicked button
const textOutput = document.querySelector('.text-display')

//add an eventListener to each of the buttons
buttons.forEach(button => {
  button.addEventListener('click', () => { 
    // get the button value
    const buttonText = button.textContent;
    
    // when this button is clicked, we want to display the text of the    clicked button
    textOutput.textContent = buttonText + " was selected!" 
  })
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.