jquery toggle button value

Question

In the below code when the play button is clicked Its value should be changed to pause and when pause is clicked the other function should be called .How to do this using jq

Answer 1

I would say

statuses = ['Play', 'Pause'];
$('#btn_play').val(
    $('#btn_play').val() == statuses[0]
    ? statuses[1] : statuses[0]
);

Answer 2

$('#play_button_id').toggle(play,play_pause);

this will trigger the play() function when you click the button for the first time

and the play_pause() when you click the button for the second time

Answer 3

Give your button an ID:

<input type="button" id="play" value="play"/>

Then you can do something like this:

$('#play').click(function() {
   if ($(this).val() == "play") {
      $(this).val("pause");
      play_int();
   }
   else {
      $(this).val("play");
     play_pause();
   }
});

Or a slightly tidier version like this:

$(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
}

Working demo

Answer 4

A simplest idea can be this

function play(action) {
 { 
   if(action=='play') { 
      play_int(); 
      $("#btn_play").val('pause');
   }
   else { 
      pause_int(); 
      $("#btn_play").val('play');
   }
}

$("#btn_play").click(function() {
   val = $(this).val();
   play(val);
}

Answer 5

try ( in jQuery < 1.9 )

$("input[type='button']").toggle(
    function(){
        $(this).val("Pause");
    }, 
    function(){
        $(this).val("Play");
    }
);

DEMO

Note: The toggle event was deprecated in 1.8 and removed in 1.9