如何在单击按钮时更改onclick函数值

Question

I've tried looking for answer for this and can't seem find one specific to this.

My site has a button, which looks like this:

<input class="btn btn-success" onclick="w.start()" type="button" value="Start" id='start' />

And on click I want it to change to "Stop" and I want the onclick function to change to onclick="w.stop()" instead of w.start() and I want the class to change to from btn-success to btn-danger (bootstrap)

I can get the name to change fine using this jQuery:

$(function () {
    $('#start').click(function () {
        $(this).val() == "Start" ? play_int() : play_pause();
    });
});

function play_int() {
    $('#start').val("Stop");
    // do start
}

function play_pause() {
    $('#start').val("Start");
    // do stop
}

But how do I get the onclick function and the class to change?

Especially the onclick function :)

Answer 1

You got a lot of good advice about how to handle the issue in different ways -- but nothing answering your specific question about how to change the onclick . This is a useful ability in many contexts -- so even if you take somebody else's counsel about the general approach, I wanted to answer your specific question.

Here's code that I've tested and found to work:

<script>
function play_int() {
    alert("play_int was executed");
    $("#start").val("Stop");
    $("#start").attr("onclick", "play_pause()");
    // do start
}

function play_pause() {
    alert("play_pause was executed");
    $("#start").val("Start");
    $("#start").attr("onclick", "play_int()");
    // do stop
}
</script>

<input class="btn btn-success" onclick="play_int();" type="button" value="Start" id='start' />

Answer 2

I think it would be easiest to just start with two buttons, one called start and one called stop, and have stop initially hidden.

In your start function add

$('#start').hide();
$('#stop').show();

Then your old button, with its name and function disappear and your new button with the proper name and proper function appears.

Answer 3

Instead of changing the function it is calling, use an "if" statement. Not as familiar with jquery as I am raw, js, but I think it would be something like this.

if($('#start').val = "start"){
   function play_int() {
        $('#start').val("Stop");
        // do start
   }
}
if($('#start').val = "stop"){
   function play_pause() {
        $('#start').val("Start");
        // do stop
   }
}

Answer 4

$(function(){$('#start').click(function() {
   if($(this).val() == "Start"){
       $(this).val("Stop");
       play_int();
   } else {
       $(this).val("Start");
       play_pause();
   }
});

Answer 5

Just use one event handler. I would use jQuery to detect which class is active on your button. Then you can perform the appropriate actions. You don't need to set onclick in your element if you use this.

$(function () {
    $('#start').on('click', function() {
        if($(this).is('.btn-success')){
            $(this).removeClass('.btn-success').addClass('.btn-danger').val('Stop');
            //Do Start
        }else{
            $(this).removeClass('.btn-danger').addClass('.btn-success').val('Start');
            //Do Stop
        }
    });
});

Answer 6

Why not call a toggle function each time your button is clicked and let it handle the conditional.

function toggleChange(event){
  if($('#start').val()=="Stop";
     $('#start').val("Start");
     $('#start').addClass('newClass')
     $('#start').removeClass('oldClass')
   }
   else{
      $('#start').val("Stop");
      $('#start').addClass('newClass')
      $('#start').removeClass('oldClass')
   }
}

Answer 7

<input class="btn btn-success" onclick="w.start()" type="button" value="Start" id='btn' />

 $(function () {
  $('#btn').click(function () {
    var opn=$(this).val();
    switch(opn){
      case 'start':
      $(this).val("stop").removeClass('.btn-success').addClass('.btn-danger').click(w.stop); 
      break;

      case 'stop':
      $(this).val("start").removeClass('.btn-danger').addClass('.btn-success').click(w.start); 
      break;

  }
});
});

Answer 8

This is a no jquery solution

HTML

<input class="btn-success" onclick="callme(this);" type="button" value="Start"/>

JAVASCRIPT

var callme = (function() {
    var start = true;
    return function(me) {
        if(start) {
            me.value = "Stop";
            me.className = "btn-danger";
            w.start();
        } else {
            me.value = "Start";
            me.className = "btn-success";;
            w.stop();
        }
        start = !start;
    };
}());

Here is the fiddle http://jsfiddle.net/HhuNU/

Answer 9

I took a look at your responses and found a solution that fits best for me:

$(function(){$('#start').click(function() {
    $(this).val() == "Start" ? play_int() : play_pause();                           
    });
});

function play_int() {
    $('#start').val("Stop");
    $('#start').addClass('btn-danger');
    $('#start').removeClass('btn-success');
    w.start();
}

function play_pause() {
    $('#start').val("Start");
    $('#start').addClass('btn-success');
    $('#start').removeClass('btn-danger');
    w.stop();
}

The w.stop() and w.start() are functions of another bit of js that starts the timer (this is for a timer app) :)

Feel free to give me feedback on my solution.