Two events one onclick

[Aaryq]

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.

 

[CodeMonkeyJ]

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.