CODEWITHSUNDEEP
javascripthtmljquery
Vinita
Vinita

Reputation: 1864

how to access the id of any button on click?

I have a button as such whose id I am not aware of

  <button id="" class="mybtn" type=""></button>

and now I want to get the id of this button on click

    ("//what to write here").click(){
      console.log($(this).id);//something like this i want
     }

but the problem with using class selector is that I have multiple buttons which so it will select all of them and not just the one which is clicked.

Upvotes: 3

Views: 1121

Answers (2)

PeterKA
PeterKA

Reputation: 24638

The event handler below is attached to all buttons (elements) with the class .btn but since you can only click one button at a time, you will only see one id per click - the id of the button clicked:

$('.mybtn').on('click', function() {
    console.log( this.id );
});


$(function() {
    $('.mybtn').on('click', function() {
        console.log( this.id );
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <button id="id1" class="mybtn" type="">Button 1</button>
 <button id="id2" class="mybtn" type="">Button 2</button>
 <button id="id3" class="mybtn" type="">Button 3</button>
 <button id="id4" class="mybtn" type="">Button 4</button>

Upvotes: 2

elpmid
elpmid

Reputation: 932

You can do it like this. I commented the code for the syntax

$("button.mybtn").on("click", function() {
  console.log($(this).attr("id")); // return blank when no id
  console.log(this.id); // return undefined when no id
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <button id="hello" class="mybtn" type="">Sample</button>
  <button id="hello1" class="mybtn" type="">Sample</button>

Upvotes: 5

Related Questions