jQuery .click don't execute following code if element got clicked-CodePudding

This is most likely a duplicate, but I can't find something how to do it and asking for advice to push me in the right direction

With the following code I want to check which button got clicked and then do some stuff. It is working, but if for some weird reason the user is able to click the other button too, my variable would get overridden.

That is the right way of doing it right? To have a solution for every possible way that could happen and not to ignore it and say "it will never happen anyway"?

So the best thing would be (I think) to stop (break) the code (the second .click function) if the first one has already been clicked and vice versa.

The first thing that comes in mind is an if statement, but I'm not really sure how I would set this up and can check if one button has already has been clicked.

$(document).ready(function() {

  let yourOrganisation;

  $('.donate_btn').click(function() {
    $('.donate_button_wrapper').hide();
    $('.donate_finish_wrapper').show();
    $(window).scrollTop(0);
  });

  $(".donate_button_1").click(function() {
    yourOrganisation = "Organisation 1"
    console.log(yourOrganisation);
  });

  $(".donate_button_2").click(function() {
    yourOrganisation = "Organisation 2"
    console.log(yourOrganisation);
  });


});

.donate_finish_wrapper {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="donate_button_wrapper">
  <button class="donate_btn donate_button_1">
    Button 1
  </button>
  <button class="donate_btn donate_button_2">
    Button 2
  </button>
</div>

<div class="donate_finish_wrapper">
  Some content
</div>

CodePudding user response：

What about disabling the other button?

$(document).ready(function() {

  let yourOrganisation;

  $('.donate_btn').click(function() {
    // commented out to show the disabled method
    // $('.donate_button_wrapper').hide();
    $('.donate_finish_wrapper').show();
    $(window).scrollTop(0);

    if($(this).hasClass('donate_button_1')) {
      $('.donate_button_2').attr('disabled','disabled');
      yourOrganisation = "Organisation 1"
    }

    if($(this).hasClass('donate_button_2')) {
      $('.donate_button_1').attr('disabled','disabled');
      yourOrganisation = "Organisation 2"
    }
  });
});

.donate_finish_wrapper {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="donate_button_wrapper">
  <button class="donate_btn donate_button_1">
    Button 1
  </button>
  <button class="donate_btn donate_button_2">
    Button 2
  </button>
</div>

<div class="donate_finish_wrapper">
  Some content
</div>

CodePudding user response：

You could check if the variable "yourOrganisation" has already been set:

if(!yourOrganisation) {yourOrganisation = "Organisation 1";}

and

if(!yourOrganisation) {yourOrganisation = "Organisation 2";}