I am trying to figure out how to trigger an audio file when a button is hovered and has a specific number displayed it will play a specific audio file.
The first code does not work for me. The second code works but not correctly and some how doesnt take into consideration what is being displayed on the button.
//First-Code - Assigns answer-buttons with an event listener
document.getElementById('answer-buttons').addEventListener("mouseover", answerHoverButtonAudio);
//Button Function to call answerHoverButtonAudio
function answerHoverButtonAudio() {
if (document.getElementById('answer-buttons').innerText == ('1')) {
var audio = document.getElementById('Number-1')
audio.play();
}
}
//Second-Code - This code below triggers the audio but does it no matter what text is showing on the button somehow.
//Assigns answer-buttons with an event listener
document.getElementById('answer-buttons').addEventListener("mouseover", answerHoverButtonAudio);
//Button Function to call answerHoverButtonAudio
function answerHoverButtonAudio() {
if (answerButtonsElement.innerText.includes('1')) {
var audio = document.getElementById('Number-1')
audio.play();
}
}
You can use event passed via mouseevent listener which can check innerText to play particular audio.
code sandbox - https://codesandbox.io/s/amazing-hypatia-j76ggx?file=/src/index.js
const answerHoverButtonAudio = (event) => {
if (event.currentTarget.innerText.includes("1")) {
debugger;
var audio = document.getElementById("Number-1");
audio.play();
}
};
document
.getElementById("answer-buttons")
.addEventListener("mouseover", answerHoverButtonAudio);<div id="answer-buttons">1</div>
<audio controls id="Number-1">
<source src="https://www.w3schools.com/tags/horse.ogg" type="audio/ogg" />
Your browser does not support the audio element.
</audio>