Drum Machine Fully Functional but Not Passing Tests?

[VaineHertz]

I decided to use wad.js to source my sounds and didn’t need to necessarily use the html5 <audio> element, but I tried to put the wad.js sounds as the src attribute for the <audio> elements anyway as it’s required for the challenge/tests but I’m still failing the tests and am not sure why. Please let me know if you have insight

ZEvdMBV

const MOUSECLICK = 1;
const piano = new Wad(Wad.presets.piano)

const notes = {
  q: 'A4',
  w: 'B4',
  e: 'C4',
  a: 'D4',
  s: 'E4',
  d: 'F4',
  z: 'G4',
  x: 'A5',
  c: 'B5'
}

window.onload = () => {
  document.getElementById('A4').addEventListener('click', playNote);
  document.getElementById('B4').addEventListener('click', playNote);
  document.getElementById('C4').addEventListener('click', playNote);
  document.getElementById('D4').addEventListener('click', playNote);
  document.getElementById('E4').addEventListener('click', playNote);
  document.getElementById('F4').addEventListener('click', playNote);
  document.getElementById('G4').addEventListener('click', playNote);
  document.getElementById('A5').addEventListener('click', playNote);
  document.getElementById('B5').addEventListener('click', playNote);
  document.addEventListener('keypress', playNote);
  document.addEventListener('keyup', onKeyUp);
}

const playNote = {
  handleEvent(note){
    let keyPressed = String.fromCharCode(note.which);
    if (note.which === MOUSECLICK){
      const keyBtn = note.target.getAttribute('keyBtn')
      console.log(`${keyBtn} pressed: playing ${note.target.id}`)
      document.getElementById(keyBtn).src = piano.play({pitch:note.target.id})
      changeDisplay(note.target.id);
      document.getElementById(keyBtn).src
    }
    else if (notes[keyPressed] != undefined){
      console.log(`${keyPressed.toUpperCase()} pressed: playing ${notes[keyPressed]}`)
      document.getElementById(keyPressed.toUpperCase()).src = piano.play({pitch:notes[keyPressed]});
      changeDisplay(notes[keyPressed]);
      document.getElementById(keyPressed.toUpperCase()).src
      document.getElementById(notes[keyPressed]).style.background = 'rgb(140, 140, 125)';
    }
  }
 }

const changeDisplay = (note) => {
  document.getElementById('display').innerText = `Playing: ${note}`;
}

const onKeyUp = {
  handleEvent(event){
    let keyUnpressed = String.fromCharCode(event.which);
    let noteUnpressed = notes[keyUnpressed.toLowerCase()]
    if (noteUnpressed != undefined)
      document.getElementById(noteUnpressed).style.background = 'rgb(240, 240, 225)';
  }
}

const DrumPad = (props) => {
  return (
    <button keyBtn={props.keyBtn} className='drum-pad' id={props.id}>
      <audio className='clip' id={props.keyBtn} src={piano.play()}/>
      {`${props.keyBtn}`}
    </button>
  )
}

const DrumButtons = () => {
  return (
    <div id='drum-buttons'>
      <DrumPad keyBtn='Q' id='A4' />
      <DrumPad keyBtn='W' id='B4' />
      <DrumPad keyBtn='E' id='C4' /><br/>
      <DrumPad keyBtn='A' id='D4' />
      <DrumPad keyBtn='S' id='E4' />
      <DrumPad keyBtn='D' id='F4' /><br/>
      <DrumPad keyBtn='Z' id='G4' />
      <DrumPad keyBtn='X' id='A5' />
      <DrumPad keyBtn='C' id='B5' />
    </div>
  )
}

class Presentational extends React.Component {
  constructor(props){
    super(props)
  }
  
  render(){
    return <div id='drum-machine'>
      <h3>Musical Pads</h3><br />
      <div id='display'>Playing: </div>
      <DrumButtons />
    </div>
  }
}

ReactDOM.render(<Presentational />, document.getElementById('root'))

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.88 Safari/537.36

Challenge: Build a Drum Machine

Link to the challenge:

freeCodeCamp.org

[VaineHertz]

I solved it by removing the event listeners from global scope/window.onload and adding the listeners in the react component render return onClick={listeningFunction}