Problem with document.getElementsById - Drum Machine Project

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) {

  render() {
    return (
      <div id="drum-machine">
        <div id="display">
          <h4> Key Sound: </h4> 
          <p id="displayKey"> "click or press a key" </p>
        <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"/>

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

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

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

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.

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

1 Like