I'm trying to change text inside of several buttons when audio is paused. For now my function does pause and play the audio, but for a reason I don't quite understand, my function won't change the HTML inside buttons.
⚆ _ ⚆ What am I doing wrong?
var Audio = document.getElementById('Audio');
var buttonPlay = document.querySelectorAll('.music-play-button');
for (var i = 0; i < buttonPlay.length; i++) {
buttonPlay[i].addEventListener("click", function () {
if (Audio.paused) {
Audio.play();
buttonPlay[i].innerHTML = "Pause Music";
} else {
Audio.pause();
buttonPlay[i].innerHTML = "Play Music";
}
});
} <button class="music-play-button">Play Music</button>
<button class="music-play-button">Play Music</button>
<button class="music-play-button">Play Music</button>
<audio id="Audio" src='https://dl.dropboxusercontent.com/s/0xu2nln4mpathtw/The%20Wraith.mp3'></audio> UPDATE: here is an improved version based on Kevin Mpofu solution. It does change HTML inside all buttons when audio is paused or played.
var Audio = document.getElementById("Audio");
var buttonPlay = document.querySelectorAll(".music-play-button");
buttonPlay.forEach((prm) => {
Audio.addEventListener('playing', (event) => {prm.innerHTML = "Pause Music";})});
buttonPlay.forEach((prm) => {
Audio.addEventListener('pause', (event) => {prm.innerHTML = "Play Music";})});
buttonPlay.forEach((prm) => {
prm.addEventListener("click", function () {
if (Audio.paused) {
Audio.play();
prm.innerHTML = "Pause Music";
} else {
Audio.pause();
prm.innerHTML = "Play Music";
}
});
}); <button class="music-play-button">Play Music</button>
<button class="music-play-button">Play Music</button>
<button class="music-play-button">Play Music</button>
<audio id="Audio" src="https://dl.dropboxusercontent.com/s/0xu2nln4mpathtw/The%20Wraith.mp3"></audio>var Audio = document.getElementById('Audio');
var buttonPlay = document.querySelectorAll('.music-play-button');
buttonPlay.forEach(btn => {
btn.addEventListener("click", function () {
if (Audio.paused) {
Audio.play();
btn.innerHTML = "Pause Music";
} else {
Audio.pause();
btn.innerHTML = "Play Music";
}
});
});<button class="music-play-button">Play Music</button>
<button class="music-play-button">Play Music</button>
<button class="music-play-button">Play Music</button>
<audio id="Audio" src='https://dl.dropboxusercontent.com/s/0xu2nln4mpathtw/The%20Wraith.mp3'></audio>