Passing input on button click - Drum machine

#1

Hey everyone!

I started working on the Drum Machine project. My thought process is as follows: when I click a button, input state takes the id value of that button, and then the sound is played based on that input value.

I am trying to test whether each button click is passing its id to the input. I’ve used text (<p) tag that should become visible and show the id of the button when clicked. However, it seems that the input isn’t displayed each time a button is clicked, but only sometimes. The same thing can be seen in the console log, where sometimes the input is simply empty.

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

Any help is much appreciated!

MJ

#2

Since you have an <h1> tag within the <button> tag, the onClick function will not fire when the <h1> is clicked. The <h1> takes up the entire width of the button, and the height is the height of the letter within the button.

tl;dr Get rid of the <h1> tags, and just have the letter sit inside the button. It should work as expected If you want to change the size and font weight of the letter, change it with CSS.

#3

Yep, this works! Thank you so much :slight_smile:!

#4

Glad I could help out!

#5