Drum Machine - want pads labeled different but now keyboard doesn't work

JavaScript
1

Tell us what’s happening:

Hello! I changed my original code so that each drum pad was labeled with a more descriptive name (not just the Letter.) However, now the keyboard doesn’t play the sounds (only the cursor does).

Thanks for reading!

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36.

Challenge: Build a Drum Machine

Link to the challenge:

2

I don’t know much about React. The event listener is listening for keys (I consoled it), but that isn’t triggering the sounds.

Is it that

const id = e.key.toUpperCase();
  const audio = document.getElementById(id);

creates the audio element that will be used? I don’t see how that id corresponds to the src of the particular audio. Is it not linking up right there? (lines 98ish)

3

Hey Steve,
I wonder about key={ idx} in< DrumPad> and suggest use sound.key instead of idx?

const App = () => (
  <div id="display" className="display">
    <h1>Drumset Machine</h1>
    {sounds.map((sound, idx) => (
      <DrumPad text={sound.name} key={idx} audio={sound.mp3} />
    ))}
  </div>
);

becomes

const App = () => (
  <div id="display" className="display">
    <h1>Drumset Machine</h1>
    {sounds.map((sound, idx) => (
      <DrumPad text={sound.name} key={sound.key} audio={sound.mp3} />
    ))}
  </div>
);
4

Hi Paul! I believe I’m following your line of thought. Unfortunately, the keyboard keys still don’t trigger the sounds. Thanks for giving it a whirl though!

Steve

5

All good questions and considerations, Cactus. I also don’t know a lot about React. I may just stick to the tests passed version and save my personal display indulgences for after I get more experience. :slight_smile: Thanks for your input!

Steve

6

The id on the element and the character you get back from e.key.toUpperCase() do not match.

Example for the Q key:

const id = e.key.toUpperCase();
const audio = document.getElementById(id);
console.log(id) // Q
console.log(audio) // null