Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Callback Functions in JavaScript Callbacks and the DOM Callbacks with DOM Elements

Cristian Gerardo Hernandez Barrios
Cristian Gerardo Hernandez Barrios
28,382 Points
Posted by Cristian Gerardo Hernandez Barrios
Cristian Gerardo Hernandez Barrios
28,382 Points

I'm stuck again

We have a page with 3 buttons. Our goal is to apply the spinElement callback to btn1, btn2, and btn3. The spinElement function should be triggered on the click event. Modify the code in the app.js file to add the event listener to every button.

This is my error Bummer! Did you use addEventListener with the 'click' event on btn1?

I put the addEventListener to my buttons, i dont know what is the error. Please help i think is something little

app.js 
const btn1 = document.getElementById("button1");
const btn2 = document.getElementById("button2");
const btn3 = document.getElementById("button3");

function spinElement(event) {
  //Applies spinning animation to button element
  btn1.addEventListener ('click', event => {
   event.target.className = "spin"; 
  });

  btn2.addEventListener ('click', event => {
     event.target.className = "spin"; 
  });

  btn3.addEventListener ('click', event => {
   event.target.className = "spin"; 
  });
}
index.html 
<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <link rel='stylesheet' href='styles.css'>
    </head>
    <body>
        <section >
            <button id='button1'>Button 1</button>
            <button id='button2'>Button 2</button>
            <button id='button3'>Button 3</button>
        </section>
        <script src='app.js'></script>
    </body>
</html>

4 Answers

Ricardo Martins
Ricardo Martins
16,909 Points
Ricardo Martins
Ricardo Martins
16,909 Points 
const btn1 = document.getElementById("button1");
const btn2 = document.getElementById("button2");
const btn3 = document.getElementById("button3");

const spinElement = event => {
  //Applies spinning animation to button element
  event.target.className = "spin";
};

btn1.addEventListener ('click',spinElement);

btn2.addEventListener ('click', spinElement);

btn3.addEventListener ('click', spinElement);
Matthew Caloger
Matthew Caloger
12,903 Points
Matthew Caloger
Matthew Caloger
12,903 Points

The spinElement() method adds the class "spin" to the given element from event.

Create all three event handlers outside of the spinElement() method, then within the event handlers, call the spinElement, passing along the event handler's event object.

const btn1 = document.getElementById("button1");
const btn2 = document.getElementById("button2");
const btn3 = document.getElementById("button3");

function spinElement(event) {
  //Applies spinning animation to button element
  event.target.className = "spin";
}

  btn1.addEventListener ('click', event => {
   spinElement(event)
  });

  btn2.addEventListener ('click', event => {
     spinElement(event)
  });

  btn3.addEventListener ('click', event => {
   spinElement(event)
  });
Joe Beltramo
PLUS
Joe Beltramo
Courses Plus Student 22,191 Points
Joe Beltramo
Joe Beltramo
Courses Plus Student 22,191 Points

You need to add spinElement as the callback to each button. Do not modify the spinElement method.

You are calling the addEventListener correctly just with the wrong method in the wrong place.

buttonElement.addEventListener('click', methodNameGoesHereAsCallback);

Hope that helps

Robert O'Toole
Robert O'Toole
6,366 Points
Robert O'Toole
Robert O'Toole
6,366 Points

another good way outside of this course to do something like this is to use a forEach loop.

you can't add an event listener to multiple or all buttons at once without a forEach loop. so in this case you would define all the buttons with const buttons=querySelectorAll('button') then do something like this

buttons.forEach(button=>button.addEventListener('click', then the function name goes here));

this will allow for the same function to handle ALL the buttons in a single line of code rather than this rather tedious way.