Problem with document.getElementsById - Drum Machine Project

1

Hello Everyone, I’ve been stuck for hours with the Drum Machine Challenge on FCC. it seems like I am missing some thing, but can’t figure it out.

My code bellow is almost working, when I click any “Drumpad” button it calls the padClicked function and all it’s parameters, but when I try to change the HTML text of an ID with “document.getElementsById(“displayKey”).innerHTML” it doesn’t work.

Trying to console log this element also doesn’t work. However the “Console.log(keyPressed);” is working and printing the key correctly, so the function is being called.
Can anyone help me?

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div id="drum-machine">
        <div id="display">
          <h4> Key Sound: </h4> 
          <p id="displayKey"> "click or press a key" </p>
        </div>
        <div id="buttons">
          <DrumPad id="Q" keyCode="81" soundLink="Heater-1"/>
          <DrumPad id="W" keyCode="82" soundLink="Heater-2"/>
          <DrumPad id="E" keyCode="83" soundLink="Heater-3"/>
        </div>

      </div>
    )
  }
}
const DrumPad = (props) => 
    <buttom class="drum-pad btn btn-primary" 
      id={props.id}
      soundLink={props.soundLink}
      onClick={() => padClicked(props.id, props.soundLink)}>
      {props.id}
    </buttom>

 function padClicked(keyPressed, soundLink) {
   console.log(keyPressed); 
   document.getElementsById("displayKey").innerHTML = keyPressed; 
   console.log(document.getElementsById("displayKey"));
   
 }

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

Well, apparently, after hours changing my code and looking for solutions I found the problem the moment I posted it here.

getElementsById is written incorrectly.
The right way is getElementById (element, singular, not plural. No “s”).

The codepen console wasn’t showing any message, well, thats programming I supose.
Thanks anyway. Maybe this can help someone in the future.

3

I had the same problem today lol. It’s such an easy error to overlook

1 Like