user3369081 user3369081 - 3 months ago 10
HTML Question

How to create html button that runs two functions?

Hello I'm trying to create a play and pause button for a little web application I'm creating. I've already made a button that plays and another button that pauses but but now I need a button that'll run the play function when clicked and go back to the pause button when clicked.

var audio = new Audio("audio.mp3");

$(".play").click(function () {
audio.play();
})

$(".pause").click(function () {
audio.pause();
$(this).toggleClass(".play");
});


And here's the buttons

<div class="play"><img src="../images/play.gif"></img></div>

<div class="pause"><img src="../images/pause.gif"></img></div>


I know there could be and easy way to make a div change classes every time its clicked.

Answer
var audio = new Audio("audio.mp3");

$(".play").click(function () {
    $(this).hide();
    $(".pause").show();
    audio.play();
})

$(".pause").click(function () {
    audio.pause();
    $(this).hide();
    $(".play").show();
    $(this).toggleClass(".play");
});

this is the simplest way. it would probably be better to do it with css psuedo classes, but i leave this pleasure to you if you care enough