Two events one onclick

Joined
Feb 22, 2022
Messages
1
Reaction score
0
So I can get the events to happen separately but I need them to happen at the same time. Here's the code I am using:

<div class="red">

<button type="button" onclick="audio(); story();"><img src="squeak.png" alt="s" class="squeak">
</button>

<audio src="Squeaky-toy-sound-effect.mp3" id="mySqueak"></audio>

</div>
<script>
function audio() {
document.getElementById("mySqueak").play();
}

function story() {
document.location.href="story.html";

}
</script>

Basically I need the image to squeak and go to the page story.html.
 
Joined
Mar 3, 2021
Messages
240
Reaction score
30
Vanilla JavaScript like this, without setTimeout, is quite single-threaded, so they can't happen simultaneously. I think. play() returns a Promise and I admit I'm a little iffy on that bit. Does the page load after the sound plays completely? I don't think you'll have much luck loading a new page _while_ audio is playing like that. The browser should stop any media playing when it starts loading a new page. I think you'll have to implement it as a single page application style page, where you use JavaScript/AJAX to retrieve the content of the page you want to show and then modify the current document/page to show the new content.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,781
Messages
2,569,615
Members
45,297
Latest member
EngineerD

Latest Threads

Top