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.
 
Ad

Advertisements

Joined
Mar 3, 2021
Messages
243
Reaction score
29
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

Top