Build a Drum Machine - can't pass tests 5 and 6

JavaScript
#1

Tell us what’s happening:
My drum machine is in vanilla JS, it works as expected, but I can’t pass tests 5 and 6.
One thing I noticed, but couldn’t fix: The app only responds to keys being pressed on the keyboard after I click somewhere close to the div containing the pads. It won’t work from the beginning.

I also noticed the .drum-pad elements have to be clickable, but I haven’t been able to use an

Thanks in advance, fellow campers!

Your code so far


Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36.

Link to the challenge:

#2

So one of your two problems, in the click handler? You’re doing:

document.getElementById(e.srcElement.innerHTML);

But that’s not the attribute of srcElement you really want – do you want the HTML of the element, or the Text of the element?

Also, if you want the .drum-pad element to be referenced, you could do something like this at the top of the click handler function:

let clicked = e.target.closest(".drum-pad");

Then simply use the clicked variable throughout instead of e.srcElement, as it’s the container for this particular drum-pad.

#3

Thanks for the reply! Actually I needed to do it this way because the id of the element matches the innerHTML of the clickable element (). The audio plays fine this way, but if I grab the .drum-pad (which is a div), nothing happens. I get a null pointer for the audio clip.

I think the issue is that the test needs my clickable element to be of class “drum-pad” and have an as a child element. I couldn’t nest an in any clickable element, so I wrapped them in a div.

#4

But did you switch away from innerHTML?

#5

Sorry, I was travelling and didn’t have access for a few days. Yes, I did change that, but I couldn’t reference the audio clip.

#6