javascript, 2 different function on a unique button, with 2 events

Question

I want to build a JS script, to add 2 onClick events in 1 single button. This 2 events must works separately: ex. first click on button: event A

second click on the same button: event B

that's my code:

html button: press it once to how a div, press it again to show another div

<button id="add-form" class="add"><a class="btn" href="#"><i class="fa fa-plus-circle fa-2x"></i></a></button>-->

...
...

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>

the 2 div are hidden at start

  $("#div2").hide();
  $("#div3").hide()

that's the function to(try) show the 2 divs, once at time

    $("#add-form").click(function(){
      $("#viaggio2").fadeIn();
    }$("#add-form").click(function(){
      ("#viaggio3").fadeIn();
    });

  });
  </script>

PS. Sorry for my bad english, and ty everyone who try to help me! :)

Are you using jQuery?

adamSrgnt
– adamSrgnt

2016-07-22 19:35:29 +00:00
Commented Jul 22, 2016 at 19:35 — adamSrgnt
– adamSrgnt, Commented Jul 22, 2016 at 19:35
What did you try? can you show your code.

litelite
– litelite

2016-07-22 19:36:29 +00:00
Commented Jul 22, 2016 at 19:36 — litelite
– litelite, Commented Jul 22, 2016 at 19:36

Ankanna · Accepted Answer · 2016-07-25 08:28:03Z

3

you can do this simply in jQuery

$( "#target" ).toggle(function() {
  alert( "calling function 1" );
}, function() {
  alert( "calling function 2" );
});

Docs

If more than two handlers are provided, .toggle() will cycle among all of them. For example, if there are three handlers, then the first handler will be called on the first click, the fourth click, the seventh click, and so on.

Note

This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of arguments passed.

But to your requirement it can be done easily with toggleClass

$("#add-form").click(function(){
      $(this).toggleClass("add-form add-form2")
      $("#viaggio2").fadeIn();})
$("#add-form2").click(function(){
$(this).toggleClass("add-form add-form2")
      $("#viaggio3").fadeIn();})

edited Jul 25, 2016 at 8:28

answered Jul 22, 2016 at 19:34

Ankanna

7772 gold badges8 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Luca Zambon Over a year ago

hmm i've tried it with my code, but it doesn't work.. my button's id is "#A" and the 2 divs which I've to show on 2 separate clicks are id "#divA" and "#divB". So the code to show one at time is: $("#A").toggle(function(){ $("#divA").show();], function(){ $("#divB").show();}); right?

Ankanna Over a year ago

@LucaZambon if you are using jQuery >1.9 it won't work so i edited the answer check it once

Luca Zambon Over a year ago

thank you dude for the reply, but it still not working.. With this method, it still showing me all the 2 events in the same click.

Ankanna Over a year ago

@LucaZambon make sure you have the class name if possible invite to chat

Ankanna Over a year ago

@LucaZambon i have miss spelled your ids viaggio2 now i have corrected hope this works

Oskar Szura · Accepted Answer · 2016-07-22 19:32:47Z

1

You can attach one event but with counter for ex:

 var condition = 0;

 document.querySelector('.my-button').addEventListener('click', function() {

  if(condition === 0) { /* logic 1 */
  else if (condition === 1) { /* logic 2 */}

  condition++;
 });

answered Jul 22, 2016 at 19:32

Oskar Szura

2,5795 gold badges34 silver badges43 bronze badges

2 Comments

Oskar Szura Over a year ago

i assume he doesn't want to 'toggle' - but yes, it toggling, the he'll have to reset the counter.

Oskar Szura Over a year ago

He said only: one -> A, second -> B, he didn't say third -> A

SteamDev · Accepted Answer · 2016-07-22 20:43:00Z

0

The jQuery .toggle() method has some elegance to it, but it does come with some extra functionality you may not be expecting. Be sure to read the documentation before implementing.

A more vanilla approach would be something like this:

// keep track of button clicks
var buttonClickCount = 0;

document.getElementById('myButton').addEventListener('click', function(){

  // increment the button click count
  ++buttonClickCount;

  // on the first click, eventA
  if(buttonClickCount===1){
    eventA();
  }

  // on the second click, eventB
  if(buttonClickCount===2){
    eventB();
  }
});

function eventA(){
  console.log('Event A');
}

function eventB(){
  console.log('Event B');
}

answered Jul 22, 2016 at 20:43

SteamDev

4,4345 gold badges22 silver badges29 bronze badges

Collectives™ on Stack Overflow

javascript, 2 different function on a unique button, with 2 events

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related