Help with drum machine project

JavaScript
1

Hi! I’m having a bit of trouble with the drum machine project that I simply can’t seem to wrap my head around! I have my function set up to play sound and when I manually feed it the ID of the audio element I want it to play, it works wonderfully. But I can’t for the life of me figure out how to get it to target the audio element within the specific div i’m clicking, which will obviously be important for when there’s more than one of them. I’ve tried using several different methods but I don’t know how to tie the id of the audio element to the div it’s in. Is there a better way to do this?

playSample() {
        let sample = document.getElementById(???);
        sample.currentTime = 0;
        sample.play();
    }
    render() {
        return (
            <div id = 'drum-machine'>
                <div id = '' className = 'drum-pad' onClick = { this.playSample }>
                    {this.state.bank[0].id}
                    <audio src = 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3' id = 'Q'> Q </audio>
                </div>
            </div>
        )
    }
}
2 
playSample(audioID) {
  let sample = document.getElementById(audioID)
  ...

onClick={() => playSample(idHere)}

Just this I think

2 Likes
3

Lol I just finished programming something much stupider

playSample(e) {
        let sample = e.target.getElementsByClassName('clip')[0];
        sample.currentTime = 0;
        sample.play();
    }

I’ll definitely try the one you suggested though. Seems much less messy.

EDIT: I should also note that I of course added a classname of ‘clip’ to the audio element.