播放/暂停按钮仅在第一个元素上起作用

Question

I'm trying to create a simple play/pause button for audio in an auto generated list. The play/pause button only works for the first element in the list.

<li>
    <span onclick="HandleAudio(this)">
    <audio id="background_music">
        <source src="/audio.mp3" type="audio/mpeg">
    </audio>
    <img style="vertical-align: middle; margin-left:11px; margin-right:5px; margin-top:-3px; cursor:pointer;" src="/play.png" alt="Play Music" id="playbutton"><span style="cursor:pointer;" id="playinfo">Play</span></span>
</li>

var mPlayer = document.getElementById("background_music"); 
var mPlayAction = document.getElementById("playbutton");
var mPlayInfo = document.getElementById("playinfo");
var isPlaying = false;
function playAudio() { 
    mPlayer.play(); 
    isPlaying = true;
    mPlayAction.src = "/pause.png";
    mPlayInfo.innerHTML = "Pause";
} 
function pauseAudio() { 
    mPlayer.pause();
    isPlaying = false;
    mPlayAction.src = "/play.png";
    mPlayInfo.innerHTML = "Play";
}
function HandleAudio(){
  if(isPlaying == true){
    //Playing already Pause it
    pauseAudio();
  }else{
    //Play the music
    playAudio();
  }
}

I expect that when I click the play/pause button it should affect the element it's in but it only affects the first element in the list. Can anyone please help me out with the right structure thanks.

Answer 1

You shouldn't really have multiple elements with the same id . id is supposed to be a unique attribute and getElementById will return just one element.

Because your functions are looking up which element to play based on id , they're only going to find the first one. Here's a minimal example of that:

 document.getElementById('test') .onclick = () => { // this will only get one element, despite there being many with the id 'a' document.getElementById('a').style.color = 'white'; } 

 div { padding: 20px; background-color: rgba(20, 20, 50); } span { color: rgba(250, 100, 150, 0.9); } 

 <div> <span id="a">A</span><span id="a">B</span><span id="a">C</span> <button id="test">Test</button> </div> 

If you use classes instead of id 's, you'll be able to get all relevant elements and work on them all:

 [...document.querySelectorAll('button')] .forEach(button => { button.onclick = (event) => { const clickedButton = event.target; [ ...clickedButton .parentElement .querySelectorAll('.a') ] .forEach(element => element.style.color = 'white') } }) 

 div { padding: 20px; background-color: rgba(20, 20, 50); } span { color: rgba(250, 100, 150, 0.9); } 

 <div> <span class="a">A</span><span class="a">B</span><span class="a">C</span> <button id="test">Test</button> </div> <div> <span class="a">A</span><span class="a">B</span><span class="a">C</span> <button id="test">Test</button> </div>