CODEWITHSUNDEEP
javascriptjqueryhtml
Josh
Josh

Reputation: 6139

How to change the onclick function value upon clicking a button

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 :)

Upvotes: 0

Views: 4166

Answers (9)

Logan Murphy
Logan Murphy

Reputation: 6230

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/

Upvotes: 0

Joe DeRose
Joe DeRose

Reputation: 3558

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' />

Upvotes: 3

Josh
Josh

Reputation: 6139

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.

Upvotes: 0

user2587132
user2587132

Reputation: 

<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;

  }
});
});

Upvotes: 0

alQemist
alQemist

Reputation: 360

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')
   }
}

Upvotes: 0

Fillmore
Fillmore

Reputation: 131

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

Upvotes: 0

Guillaume Lhz
Guillaume Lhz

Reputation: 904

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

Upvotes: 0

Jacques
Jacques

Reputation: 3774

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

Upvotes: 0

Developer Gee
Developer Gee

Reputation: 402

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.

Upvotes: 0

Related Questions