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