Test 6 not working drum machine

JavaScript
1

hello. i am pretty much done with the drum machine code and it has passed all the tests except one. test 6. i get this error " 6. When I press the trigger key associated with each .drum-pad, the audio clip contained in its child

this is my code.

const databank=[{id:“Q”,url:“https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"},{id:“W”,url:"https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3”},
{id:“E”,url:“https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3”},
{id:“A”,url:“https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3”},
{id:“S”,url:“https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3”},
{id:“D”,url:“https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3”},
{id:“Z”,url:“https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3”},
{id:“X”,url:“https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3”},
{id:“C”,url:“https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3”}
]
class App extends React.Component{
constructor(props){
super(props)
this.state={visibility:true,
display:“”}
this.onoff=this.onoff.bind(this)
this.Q=this.Q.bind(this)
this.W=this.W.bind(this)
this.E=this.E.bind(this)
this.A=this.A.bind(this)
this.S=this.S.bind(this)
this.D=this.D.bind(this)
this.Z=this.Z.bind(this)
this.X=this.X.bind(this)
this.C=this.C.bind(this)
;
}

onoff(){
if(this.state.visibility){
this.setState({visibility:false})
}else{this.setState({visibility:true})}
}
Q(){
this.setState({display:“Q”})
const audio = document.getElementById(databank[0].id);

audio.play();

}
W(){
this.setState({display:“W”})
const audio = document.getElementById(databank[1].id);

audio.play();

}
E(){
this.setState({display:“E”})
const audio = document.getElementById(databank[2].id);
audio.play()
}
A(){
this.setState({display:“A”})
const audio = document.getElementById(databank[3].id);
audio.play()
}
S(){
this.setState({display:“S”})
const audio = document.getElementById(databank[4].id);
audio.play()

}
D(){
  this.setState({display:"D"})
  const audio = document.getElementById(databank[5].id);
audio.play()
}
Z(){
  this.setState({display:"Z"})
  const audio = document.getElementById(databank[6].id);

audio.play()
}

X(){
this.setState({display:“X”})
const audio = document.getElementById(databank[7].id);
audio.play()}
C(){
this.setState({display:“C”})
const audio = document.getElementById(databank[8].id);
audio.play()
}

render(){

return(
 
<div  >
      
    <button className="drum-pad" id="hQ" onClick={this.Q}  onKeyDown={this.hc0}>
<audio className="clip"  id={databank[0].id} src={databank[0].url}/ >
  Q
    
    </button>
    <button className="drum-pad"  id="hW" onClick={this.W} onKeyDown={this.hc1}>
       <audio className="clip"  id={databank[1].id} src={databank[1].url}/ >
      W</button>
    <button className="drum-pad"  id="hE" onClick={this.E} onKeyDown={this.hc2}><audio className="clip" id={databank[2].id} src={databank[2].url}/>E</button>
     <button onClick={this.onoff}>on</button>
    <br/>
    <button className="drum-pad" id="hA" onClick={this.A} onKeyDown={this.hc3}><audio className="clip" id={databank[3].id} src={databank[3].url}/>A</button>
    <button className="drum-pad" id="hS" onClick={this.S} onKeyDown={this.hc4}><audio className="clip" id={databank[4].id} src={databank[4].url} />S</button>
    <button className="drum-pad" id="hD" onClick={this.D} onKeyDown={this.hc5}><audio className="clip" id={databank[5].id} src={databank[5].url}/>D</button>
     <text id="display" >{this.state.display}</text>
    <br/>
    <button className="drum-pad" id="hZ" onClick={this.Z} onKeyDown={this.hc6}><audio className="clip" id={databank[6].id} src={databank[6].url}/>Z</button>
    <button className="drum-pad" id="hX" onClick={this.X} onKeyDown={this.hc7}><audio className="clip" id={databank[7].id} src={databank[7].url}/>X</button>
    <button className="drum-pad"  id="hC" onClick={this.C} onKeyDown={this.hc8}><audio className="clip" id={databank[8].id} src={databank[8].url}/>C</button>
     

        

</div>
  
)}
      
      
    
}

ReactDOM.render(, document.getElementById(‘drum-machine’));

what could be the problem

2

Could you post a link to your drum machine?

3
4

What worked for me is putting the adding the adding the “keydown” event listener within a useEffect

 React.useEffect(()=>{
    document.addEventListener('keydown', (event)=>{
      playSound(event.key.toUpperCase())
    })
  }, []);

EDIT: I said useState. I meant useEffect. My bad!

5

thank you brother. i added the event listener and it worked

6

Sister actually. lol

I’m happy to help!

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.