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 jquery toggle

  <input type="button" onclick ="play" value="play"/>
   <script>
     function play()
     {
               play_int();
           //   Button value to be changed to pause
     }   

  And when pause play_pause();

Answer 1

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 2

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

Answer 3

$('#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