# Drum Machine not passing keypress test

**URL:** <https://forum.freecodecamp.org/t/drum-machine-not-passing-keypress-test/266731>\
**Category:** General\
**Created:** [March 22, 2019, 4:25pm UTC](https://forum.freecodecamp.org/t/drum-machine-not-passing-keypress-test/266731 "2019-03-22T16:25:18Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![TimothyCates](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/timothycates/32/112059_2.png) [@TimothyCates](https://forum.freecodecamp.org/u/TimothyCates)\
**Post date:** [March 22, 2019, 4:25pm UTC](https://forum.freecodecamp.org/t/drum-machine-not-passing-keypress-test/266731/1 "2019-03-22T16:25:18Z")

</div>

The drum machine project is not passing the test that checks if the drum can be pressed with a key that corresponds to the ID

The sound plays but for some reason the test fails, am I missing something?

here is a codepen to my project

> **[FCC Drums](https://codepen.io/timothycates/pen/ZPKgow)**
>
> ...

---

<div class="post-metadata">

**Author:** ![jenovs](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jenovs/32/60963_2.png) [@jenovs](https://forum.freecodecamp.org/u/jenovs)\
**Post date:** [March 22, 2019, 7:09pm UTC](https://forum.freecodecamp.org/t/drum-machine-not-passing-keypress-test/266731/2 "2019-03-22T19:09:04Z")

</div>

Explain me how this works:

```auto
  click() {
    document.querySelectorAll('audio#' + this.props.sound.key)[0].play();
    this.props.update(this.props.sound.title);
  }

  bindKey(sound, callback) {
    document.addEventListener('keydown', function(event) {
      var key = event.key || event.keyCode;
      if (key === sound.key.toLowerCase()) {
        document.getElementById(sound.key).click();
      }
    });
  }

```

---

<div class="post-metadata">

**Author:** ![TimothyCates](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/timothycates/32/112059_2.png) [@TimothyCates](https://forum.freecodecamp.org/u/TimothyCates)\
**Post date:** [March 22, 2019, 8:27pm UTC](https://forum.freecodecamp.org/t/drum-machine-not-passing-keypress-test/266731/3 "2019-03-22T20:27:13Z")

</div>

```javascript
click() {
    document.querySelectorAll('audio#' + this.props.sound.key)[0].play();
    this.props.update(this.props.sound.title);
  }

```

selects the audio tag that has the id of the current component key value and plays the audio tag. The sound property has all the information connected to a sound such as title and associated key

```javascript
  bindKey(sound, callback) {
    document.addEventListener('keydown', function(event) {
      var key = event.key || event.keyCode;
      if (key === sound.key.toLowerCase()) {
        document.getElementById(sound.key).click();
      }
    });
  }

```

takes in a sound property and a callback to the update function, if the keyboard key is pressed that matches the sounds key for that component the component then fires a click event to itself to trigger the click() and fire the sound. This was 1 line less than calling:

```auto
document.querySelectorAll('audio#' + this.props.sound.key)[0].play();
this.props.update(this.props.sound.title);

```

again and it achieves the same effect

the bindKey event is called here:

```auto
componentDidMount() {
    this.bindKey(this.props.sound, this.props.update);
  }

```

which takes the main app update from the components props and the sound associated with that component to make it all work

---

<div class="post-metadata">

**Author:** ![jenovs](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jenovs/32/60963_2.png) [@jenovs](https://forum.freecodecamp.org/u/jenovs)\
**Post date:** [March 22, 2019, 9:17pm UTC](https://forum.freecodecamp.org/t/drum-machine-not-passing-keypress-test/266731/4 "2019-03-22T21:17:00Z")

</div>

This is the definition of a spaghetti code 😀

Add `onKeyPress` handler to `Drum`:

```auto
class Drum extends React.Component {
  ...
  render() {
    return (
      <div
        onClick={this.click.bind(this)}
        onKeyPress={this.click.bind(this)} // <------- add this
        className={"drum-pad"}
        id={this.props.sound.key}
      >

```

---

<div class="post-metadata">

**Author:** ![TimothyCates](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/timothycates/32/112059_2.png) [@TimothyCates](https://forum.freecodecamp.org/u/TimothyCates)\
**Post date:** [March 22, 2019, 9:33pm UTC](https://forum.freecodecamp.org/t/drum-machine-not-passing-keypress-test/266731/5 "2019-03-22T21:33:01Z")

</div>

I tried that to no avail, I even tried to create just a test function that console logged the event and it never triggers for me to intercept it and figure out if the right key is pressed

---

<div class="post-metadata">

**Author:** ![jenovs](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jenovs/32/60963_2.png) [@jenovs](https://forum.freecodecamp.org/u/jenovs)\
**Post date:** [March 22, 2019, 9:35pm UTC](https://forum.freecodecamp.org/t/drum-machine-not-passing-keypress-test/266731/6 "2019-03-22T21:35:40Z")

</div>

![pass](https://global.discourse-cdn.com/freecodecamp/original/3X/c/0/c0c3909744132266652f212f2e15a80a95dfd76f.png)

---

<div class="post-metadata">

**Author:** ![TimothyCates](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/timothycates/32/112059_2.png) [@TimothyCates](https://forum.freecodecamp.org/u/TimothyCates)\
**Post date:** [March 22, 2019, 9:39pm UTC](https://forum.freecodecamp.org/t/drum-machine-not-passing-keypress-test/266731/7 "2019-03-22T21:39:16Z")

</div>

Ah, I see my mistake, I took out the bindKey when I did that, which makes it still pass the test but then if I actually tried to prsss the key it failed. I had not tried seeing if it passed when I realized sound was not playing

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 8:03pm UTC](https://forum.freecodecamp.org/t/drum-machine-not-passing-keypress-test/266731/8 "2021-01-17T20:03:47Z")

</div>

Closed on January 17, 2021, 8:03pm UTC