我如何获得条件（如果/其他）来检查是否单击了按钮？

Question

I'm trying to figure out a way of returning different results if a different button is clicked. I have two buttons which are to return values depending on what the user clicks. Here is a code that is close to what mine looks like.

 $(() => { const $btn1 = $("#btn1"), $btn2 = $("#btn2"); let result = 0; function fetchResult() { if("button1 is clicked"){ //Of course, that isn't the condition being tested result = 1 + 2; } else if ("button2 is clicked") { //And neither is this result = 3 + 4; } else { //do nothing } return result; } $("#result").html(fetchResult); }); 

 #result { text-align: center; font-size: 30px; background: green; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div> <button class="btn btn-lg" id="btn1">Button 1</button> <button class="btn btn-lg" id="btn2">Button 2</button> <p id="result"></p> </div> 

Answer 1

You have to add an event listener to handle click events for this to work:

$btn1.on('click', function() {
    console.log('button 1 clicked');
});

$btn2.on('click', function() {
    console.log('button 2 clicked');
});

Or you could add the event to the .btn class and determine which one is clicked based on the element's id:

$('.btn').on('click', function() {
   if (this.id === 'btn1') {
      console.log('button 1 clicked');
   } else if (this.id === 'btn2') {
      console.log('button 2 clicked');
   }
});

The latter approach would probably be better for your particular use case.

Answer 2

You could use jQuery .on method with click event:

 $("#btn1").on('click', () => { $("#result").html(1 + 2); }); $("#btn2").on('click', () => { $("#result").html(2 + 3); }); 

 #result { text-align: center; font-size: 30px; background: green; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <button class="btn btn-lg" id="btn1">Button 1</button> <button class="btn btn-lg" id="btn2">Button 2</button> <p id="result"></p> 

Answer 3

$('button').click(function () {
        alert($(this).attr('id'));
        // or what ever your code ....
    });

Do not forget to add jQuery tag in html file

Answer 4

What about just set variable when some button clicked..
Of course, in your code you will also need to run a function that sends the result to the screen when the button is pressed

$(() => {
  let btn1Clicked = false,
      btn2Clicked = false 
  const $btn1 = $("#btn1").click(()=>btn1Clicked = true),
        $btn2 = $("#btn2").click(()=>btn2Clicked = true);

  let result = 0;
  function fetchResult() {
    if( btn1Clicked ){ //Of course, that isn't the condition
      result = 1 + 2;
    } else if (btn2Clicked ) { //And this isn't the condition either
      result = 3 + 4;
    } else {
      //do nothing
    }
    return result;
  }

  $(document).on('#btn1, #btn2', function(){
   fetchResult()
  })
});

Answer 5

you could assign onclick events to both of the button individually like

$(#btnId1).on('click',function(){
//do your thing here
});
$(#btnId2).on('click',function(){
    //do your thing here
});