1

I have very simple html page with a button like this:

<button id="numberonebutton" onclick="buttonClick()">Start</button>

And I have separate .js file to include the javascript things. I am google the net for hours now but can't find a solution to this, but this could be my bad, sorry... I want this button to call a function when clicked. It works fine, buttonClick() is calledd succesfully. But I want to change the label of this button from Start to Stop (I already can do this) and when it is in the Stop stage, then call another function, not buttonClick(). How can achieve that? I know I can read the text from the button and make an if/else thing, but that just seems a crappy workaround. Isn't there a more professional way? I am a newbie at this...

Tom
  • 89
  • 1
  • 6
  • use a `callback function` there you go: http://www.w3schools.com/jquery/jquery_callback.asp – odedta Apr 24 '15 at 19:44
  • Have two button and do hide/unhide. – αƞjiβ Apr 24 '15 at 19:44
  • I was thinking about having 2 buttons and one of them is hidden while the other can be seen, but I just feel it is waste of resources to keep having duplicate buttons. I have yet to examine this callback function... – Tom Apr 24 '15 at 21:43

4 Answers4

4

This is easier done with external event binding.

function buttonClick() {
    //do stuff
    this.onclick = notButtonClick; //function reference to nBC
}

function notButtonClick() {
    //do more stuff
    this.onclick = buttonClick; //function reference to original function
}

var el = document.getElementById("numberonebutton"); //let for ES6 aficionados 
el.onclick = buttonClick; //again, function reference, no ()

Alternatively, you can bind events with addEventListener instead of onclick

As per lemon, here is a good question and answer about the differences between addEventListener and on[event] :)

Community
  • 1
  • 1
Sterling Archer
  • 22,070
  • 18
  • 81
  • 118
  • 2
    there is a fundamental difference between `addEventListener` and `on` - might wanna mention it – rlemon Apr 24 '15 at 19:49
  • This looks fine, but at me it behaves strangely. When I click the button, it hangs for a second, then finishes. I did not mention, but in the start function I am setting a setInterval, and in the stop function I am clearing it. When I used your method, it looks like the whole "loop" (things inside the start function) ran instantly at once. Should I modify your code somehow to be compatible with intervals? Also I will read the link you posted, but it seems long and now I don't have mind for that.:) Thank you very much! – Tom Apr 24 '15 at 20:25
2

Change the onclick attribute of the button with javascript:

var Foo = function(){
document.getElementById( "numberonebutton" ).setAttribute( "onClick", "javascript: Boo();" );
}

var Boo = function(){
alert("test");
}
Dagriel
  • 574
  • 2
  • 12
  • This is awosome, thanks! I was looking exactly a code this simple and short like this. It works. Is it compatible with older browsers too? What about performance, or anything else? Sorry if I am asking too much, I just started to learn javascript. Thanks! – Tom Apr 24 '15 at 20:27
  • Yes, it's compatible with every browser. You shouldn't worry with performance about this. Glad to help :) – Dagriel Apr 24 '15 at 20:31
-1

The best way to handle this is to change the button's content via JavaScript. For example: Start

function buttonClick (x) {
    if (x = 0) {
        document.getElementById('button').innerHTML = '<button id="numberonebutton" onclick="buttonClick(\'1\')">Start</button>';

        /* add what you want to do when the "Stop" button is clicked  */

    } else {
        document.getElementById('button').innerHTML = '<button id="numberonebutton" onclick="buttonClick(\'0\')">Stop</button>';

        /* add what you want to do when the "Stop" button is clicked  */

    };
}

Then, you can implement it by wrapping your button in a div (called button) like so:

<div id="button"><button id="numberonebutton" onclick="buttonClick('1')">Start</button></div>

Whats happening here is very simple. When you click the button, it checks to see if it is the Start or Stop button and changes it to the opposite. You can style your buttons any way you want with css.

This can be done with less code as well if you were to use jQuery, but this is a pure JavaScript method.

SRing
  • 694
  • 6
  • 16
  • Hm, when I use this code, the same thing happens that I described at Sterling Archer's solution, but faster. There is no hang, my progress bar is at 100% when I click the button. Using Archer's solution, it takes ~1 second. Hmm. – Tom Apr 24 '15 at 20:53
-7

I wouldn't use inline functions like that; I would do this:

<button id="numberonebutton">Start</button>

Plus:

$('#numberonebutton').click(function() {
   $(this).text('Stop'); 
   //MySecondFunctionCall(); // call another function here if you please...
});

Live example: http://jsfiddle.net/7doe44ke/

user1477388
  • 20,790
  • 32
  • 144
  • 264
  • 2
    Too much jQuery. Please follow tags. – Sterling Archer Apr 24 '15 at 19:46
  • @SterlingArcher jQuery is javascript. The OP didn't ask for a non-jQuery answer, so your downvote is not well received. – user1477388 Apr 24 '15 at 19:46
  • 7
    It's a javascript library. The question was not tagged jQuery, so convention here is to retain the native JS approach unless specifically told otherwise by OP – Sterling Archer Apr 24 '15 at 19:47
  • @SterlingArcher I don't follow that convention. jQuery exists for a reason; write less, do more (trademark) :) If you want to write and maintain more code, that's your call. But, don't perpetuate that mentality unto the rest of the world. – user1477388 Apr 24 '15 at 19:49
  • Don't argue, guys. I could have put jquery tag into the tags, because now jquery is loaded in the html page, but I don't really know if need that (at least in this early stage of the development). Don't know much either about what is it good for. So I could accept a solution that uses jquery. However I believe that everything should be done in the most simplistic way (with least possible code). :) – Tom Apr 24 '15 at 20:45