Binding functions - Drum Machine

Hi,

I am having trouble with the Drum Machine project. I am currently trying to create a function that calls multiple functions when a button is clicked (onClick).

According to the Stack Overflow posts, it should be pretty straightforward:

onClick={this.handleClick}

handleClick(){
   function1();
   function2();
}

However, this doesn’t seem to work.

Link:
https://codepen.io/snjegurotska/pen/ydejXj

Left and right buttons use the whichButton() function, while the button in the middle calls functionsTogether() function, which in turn should call whichButton() function. The console says whichButton() function isn’t defined when middle button is clicked.

Thanks!

MJ

Why do you have the following?

this.props.onClick()

You don’t have any props because you are not calling your component with any. You can definitely put as many functions as you want. The first line (seen below is perfectly valid).

this.whichButton();

Thanks for the reply!

Yeah I was looking at different posts on Stack Overflow and just tried few things, I forgot to delete it.

The problem remains, though.

MJ

If you want to call this.whichButton within the functionsTogether method, you will need to pass the event object (represented by the e parameter) or whichButton will not know about the event.

  functionsTogether(e) {
    this.whichButton(e);
  };
1 Like

Thank you so much!

I can’t believe I missed that.

MJ