How can I toggle a onclick=“function” for a button

Question

I have a button that plays and stops a video. How can I toggle between the .play() and .pause() efficiently?

<button id="thebutton" onclick="BV.getPlayer().play();"></button>

Answer 1

First off, I would suggest not using inline event handlers. If you're using jQuery, then I suggest you use that.

After each click, set a variable to tell whether it's playing or not, then trigger the correct action.

$(function(){
    $('#thebutton').click(function(){
        var isPlaying = $(this).data('isplaying');

        if(isPlaying){
            BV.getPlayer().pause();
        }
        else{
            BV.getPlayer().play();
        }

        $(this).data('isplaying', !isPlaying);
    });
});

_{jQuery used to have a .toggle() "event" , but it was removed.}

Answer 2

Add a class that acts as check for the player status. And then use this code.

$("#theButton").click(function() {
    if($(this).hasClass('playing')) {
        BV.getPlayer().pause();   
    } else {
        BV.getPlayer().play();
    }
    $(this).toggleClass('playing')
})

Answer 3

$('#thebutton').click(function() {

if ($(this).val() == "play") {
  $(this).val("pause");
  play_int();
}

else {
  $(this).val("play");
 play_pause();
 }         
});

or

 $(function(){
$('#play').click(function() {
   // if the play button value is 'play', call the play function
   // otherwise call the pause function
   $(this).val() == "play" ? play_int() : play_pause();
});
});

function play_int() {
$('#play').val("pause");
// do play
}

function play_pause() {
$('#play').val("play");
// do pause
}

aka jquery toggle button value

Answer 4

var isPlaying = false;
var player = BV.getPlayer();
$("#thebutton").click(function() {
    if (isPlaying) {
        player.pause();
        isPlaying = false;
    } else {
        player.play();
        isPlaying = true;
    }
});