为单个HTML按钮的onclick事件调用动态函数

Question

I want to call more than one function for single HTML button. But If i click a button, It calls a specific function which i have mentioned. If i click a same button after sometime, It calls to another function which is decided by me.....

For example This is my code for on click event:

<button type="button" id="outputClick" onclick="output_popup(this.id)"></button>

I need to change the function of onclick event in my js file.So please help me to apply lot of functions for single button using jQuery or Javascript.

Note : Functions called by onclick event is unique for that click event.Please avoid collisions.

Answer 1

A couple of options:

1. The simplest thing to do is have the function that gets called decide which of your various functions you want it to call. That is, you just have one function called by the event handler, which varies its behavior depending on whatever the conditions are that change.

   You haven't said what changes, but for instance here's an example that calls a different function on each click, looping back to the first when it reaches the end:

     var functions = [ function() { snippet.log("Function #1"); }, function() { snippet.log("Function #2"); }, function() { snippet.log("Function #3"); }, function() { snippet.log("Function #4"); } ]; var index = 0; $("#outputClick").on("click", function() { functions[index](); index = (index + 1) % functions.length; }); 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button type="button" id="outputClick">Click Me</button><!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 

2. Or of course, remove the old handler and attach a new one.

     $("#outputClick").on("click", f1); function f1() { snippet.log("Function #1"); $("#outputClick").off("click", f1).on("click", f2); } function f2() { snippet.log("Function #2"); $("#outputClick").off("click", f2).on("click", f3); } function f3() { snippet.log("Function #3"); $("#outputClick").off("click", f3).on("click", f4); } function f4() { snippet.log("Function #4"); $("#outputClick").off("click", f4).on("click", f1); } 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button type="button" id="outputClick">Click Me</button><!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 

Answer 2

I understood that you want to run multiple functions at the same time. Then why not to call them all in order.

Now they will not necessarily execute and return in order. to ensure that, you have to use either callbacks or promises.

 $("#clickthis").on("click", function() { a(); b(); c(); }); function a() { $('body').append('<p>this is function a</p>'); } function b() { $('body').append('<p>this is function b</p>'); } function c() { $('body').append('<p>this is function c</p>'); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="clickthis">Call Functions</button>