FCC Drum Machine Button Click onkeypress help

#1

Hello,

I’m trying to make it so that when the Q button is pressed, it will click the qButton, as in push down the button, like it was clicked by a mouse.

I thought I could do it like this: document.getElementById(“qButton”).click();

Anyone think of a way to do that?

Thanks in advance!

here’s my code so far: `import React, { useState, useEffect} from ‘react’;

let qaudio = new Audio("http://dight310.byu.edu/media/audio/FreeLoops.com/3/3/Free%20Kick%20Sample%208-900-Free-Loops.com.mp3")

let waudio = new Audio("http://www.denhaku.com/r_box/sr16/sr16sd/alloysnr.wav")

let eaudio = new Audio("http://dight310.byu.edu/media/audio/FreeLoops.com/5/5/Long%20Open%20Hi%20Hat%20002-1653-Free-Loops.com.mp3")

let aaudio = new Audio("http://thecyberbuddy.com/sounds/Woo.wav")

let saudio = new Audio("http://cs.klan-hub.ru/zombie/sound/misc/ah.wav")


document.addEventListener('keydown', function(e) {
  if (e.key == "q") {
    document.getElementById("qButton").click();
    qaudio.load()
    qaudio.play()
  }
});


document.addEventListener('keydown', function(e) {
  if (e.key == "w") {
    waudio.load()
    waudio.play()
  }
});

document.addEventListener('keydown', function(e) {
  if (e.key == "e") {
    eaudio.load()
    eaudio.play();
  }
});

document.addEventListener('keydown', function(e) {
  if (e.key == "a") {
    aaudio.load()
    aaudio.play();
  }
});

document.addEventListener('keydown', function(e) {
  if (e.key == "s") {
    saudio.load()
    saudio.play();
  }
});



function App() {
  
  return (
    <div id="DrumMachine" className="App" >
      <button id="qButton">Q</button>
      <button>W</button>
      <button>E</button>
      <button>A</button>
      <button>S</button>
      <button>D</button>
    </div>
  );
}

export default App;
#2

Make a class that looks like how you want it to look when “pressed” and add that on a mousedown event. Change it back to its old class on the mouseup.

1 Like
#3