Drum Machine - Passing all tests but onKeyDown still not working still not working

JavaScript
1

Hi all,

On the Drum Machine challenge:

Link to my project on codesandbox:

I have got the cdn script from FCC saying that all tests have passed, but when I try and press keys to run the function calling the audio clip to played, nothing happens - am I missing something here?

Keys Components

import React from "react";
import { data } from "./sounds";

export default function Key(props) {
  const soundId = props.soundId;

  const play = () => {
    document.getElementById(props.id).play();
    console.log(`'Clicked:' ${props.id}`);
  };

  const displayData = props.displayData;

  const handleClick = () => {
    play();
    displayData(props.id);
  };

  return (
    <div className="buttonContainer" >
      <button id="button" className="drum-pad" onClick={handleClick} onKeyDown={handleClick}>
        <audio
          src={data[soundId].url}
          type="audio/mp3"
          className="clip"
          id={props.id}
        />
        {props.id.toUpperCase()}
      </button>
    </div>
  );
}

App component

import React, { useState } from "react";
import Key from "./Key";

import "./styles.css";

export default function App() {
  const [displayData, setDisplayData] = useState();

  const handleDisplay = input => {
    setDisplayData(input);
    setTimeout(() => {
      setDisplayData();
    }, 500);
  };

  return (
    <div className="App">
      <div id="drum-machine">
        <p id="display">{displayData}</p>
        <Key id={"Q"} soundId={0} charCode={81} displayData={handleDisplay} />
        <Key id={"W"} soundId={1} charCode={87} displayData={handleDisplay} />
        <Key id={"E"} soundId={2} charCode={69} displayData={handleDisplay} />
        <Key id={"A"} soundId={3} charCode={65} displayData={handleDisplay} />
        <Key id={"S"} soundId={4} charCode={83} displayData={handleDisplay} />
        <Key id={"D"} soundId={5} charCode={68} displayData={handleDisplay} />
        <Key id={"Z"} soundId={6} charCode={90} displayData={handleDisplay} />
        <Key id={"X"} soundId={7} charCode={88} displayData={handleDisplay} />
        <Key id={"C"} soundId={8} charCode={87} displayData={handleDisplay} />
      </div>
    </div>
  );
}

Thank you :slight_smile:

2

Hello there.

This is actually really interesting…

What I think is happening is: The logic you have implemented causes a selected drum-pad to be activated, on any keydown event.

The tests (I do not know the logic, but I hypothesise) perform a sequence as follows:

  1. Select first drum-pad to test if it activates.
  2. Invoke keydown event with value == Q.
  3. Select second drum-pad to test if it activates.
  4. Invoke keydown event with value == W.
  5. …and so on.

This causes the tests to think your Drum Machine works correctly, because with every keydown event test, the correct drum-pad is selected beforehand.

Just my thoughts. So, you are welcome to report it as an issue in the tests. Or, change your logic to fit the criteria.

3

I see, the issue I have is that the onKeyDown isn’t firing the function, and I have absolutely no idea why. I’ve tried console.logging a string in the function and just trying on keydown but it still doesn’t work, so bit unsure as to how to change my logic.

4
  1. You have the same charCode for C and W.
  2. All of your button elements have the same id. The id attribute must be unique for any HTML page.
  3. You should probably check the event being passed to the handleClick function, so that not all keys cause a sound to be played.

Hope this helps

5

Should I be calling keydown on the children or the parent?

It’s not working event just console logging a string onKeyDown, still nothing.

Almost as if the window doesn’t recognise the key down firing.