How to get value from button after it has been clicked

I’m struggling with this assignment: Pin an event listener to the buttons. Create a function that gets called when one of the buttons is clicked. Check this with a console.log. Make sure the click event is passed to this function. Make sure you have access to the value of the button clicked in this function. Check this with console.log. The outcome you want to see in the console when you click is: Leopard / Lion / Elephant / Rhino or Buffalo.

fiveButtons = document.getElementsByClassName("big-five-button");
for (var i = 0; i < fiveButtons.length; i++) {
    fiveButtons[i].addEventListener("click", function () {
        
        Array.from(fiveButtons).forEach(function (nameButton) {
            console.log(nameButton.innerHTML);
        })
    });
}

This is what I wrote so far. When I’m clicking the button now, the outcome is the text from all the buttons. While I want the outcome to only be “Lion” after the button lion has been clicked.

<h1>The Big Five</h1>
    <ul class="big-five-list">
       <li class="big-five-list-item">
           <button class="big-five-button">Lion</button>
       </li> etc.

Answer

when creating an addEventListener you can use the event object to target the element clicked, like this:

fiveButtons[i].addEventListener("click", function (event) {
       console.log(event.target.innerHTML);
    });