I need help on the Front End Libraries Projects, Drum Machine; specifically User Story #7 which reads:
User Story #7: When a .drum-pad is triggered, a string describing the associated audio clip is displayed as the inner text of the #display element (each string must be unique).
Project specs page is here and here is my code (where I’ve completed the User Stories up to the 6th one).
What did I do wrong with the way I’m trying to do it?
Also, why do I have to first click on the drum pad element before I can trigger the audio element nested in it by pressing the associated trigger key?
I got all of the tests to pass. But I don’t know why I need to first click on one of the drum pads before I can trigger any of them with the associated trigger key. I can trigger any of them using the keyboard but I first have to click one of them (and it doesn’t have to be the one I want to trigger with a keyboard key either). Could it be because I implemented them as button elements? Here is the code, for reference. Thanks in advance.
This is how browsers implement the keyboard focus. You need to have the section listening for the events in focus, otherwise the event occurs outside of the listeners domain.