JSFiddle - React, Tailwind, and code Playground
HTML
Hover over a box to get <code>confirm()</code> message. If you press "Ok", the mockup sound code will play. If you press cancel, the mockup sound code will not play.
<div id="output"></div>
<div class="style113"></div>
<div class="style113"></div>
<div class="style113"></div>
<div class="style113"></div>
<div class="style113"></div>
CSS
div.style113 {
width: 100px;
height: 100px;
margin: 10px auto;
background-color: lightgrey;
}
JavaScript
var elems = document.getElementsByClassName("style113");
for(i in elems) {
elems[i].addEventListener("mouseover", function() {
if(confirm("audio is about to play")) {
document.querySelector("#output").innerHTML += "<br>mockup audio played";
}
});
}