CODEWITHSUNDEEP
javascriptjqueryhtml
user3369081
user3369081

Reputation: 3

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.

Upvotes: 0

Views: 298

Answers (5)

user5987717
user5987717

Reputation: 

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");
});

Upvotes: 0

Yuval Perelman
Yuval Perelman

Reputation: 4809

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

Upvotes: 0

royhowie
royhowie

Reputation: 11171

I would set up the <html> like this:

<div id="play"><img src="../images/play.gif"></img></div>
<!-- initially a play button -->

Then I would just use a boolean to switch back and forth in the script.

var toggleIt = false;
$("#play").click(function(){
    if (!toggleIt){
        audio.play();
        toggleIt = true;
        $("#play").find("img").attr("src", "file url here");
    }
    else{
        audio.pause();
        toggleIt = false;
        $("#play").find("img").attr("src", "file url here");
    }
})

edit: and here is a fiddle using wonderful place holder kittens. Yes, you should be grateful for my exquisite taste in placeholder pictures.

Upvotes: 1

Charlie
Charlie

Reputation: 11777

Set a variable then use a conditional to see if you should either play or pause the audio:

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

var play = true;
$(".button").click(function(){
    if (play){
        // Play
        audio.play();
        $(".button img").attr("src", "../images/pause.gif");
        play = false;
    } else {
        // Pause
        audio.pause();
        $(".button img").attr("src", "../images/play.gif");
        play = true;
    }
});

Example

Upvotes: 0

jorgeregidor
jorgeregidor

Reputation: 208

You can create 2 diferents button and change de visibility

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

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

})

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

Upvotes: 0

Related Questions