Onclick to Get the Id of the Clicked Button

function getclickname(obj)    {      //By passing object as argument you can access all properties of that element      alert(obj.id);      alert(obj.className);    }

<button id="test1" onclick="getclickname(this); return false;" class="test_1">click</button>

React onCLick() get buttons id

You need to pass the event in the onClick function like this:

onClick={(e) => handleClick(e)}

Then in your handleClick function, you can get the id from the event target like this:

alert(e.target.id);

Example:
https://codesandbox.io/s/relaxed-glade-cv7ce?file=/src/App.js

Find Id of clicked button

Try

:button Selector

Selects all button elements and elements of type button.

$(":button").click(function (event) {
    var urlid = this.id;
    alert(urlid);
});

$("input") --> selects elements with tag input eg. <input type="text"/> but not <button> tag .

if i click button then show this button id in reactJs

<CartStyle
  key={i}
  id={i}
  title={v.title}
  price={v.DiscountPrice}
  img={v.image}
  delete={(i) => showContent(i)} // or delete={showContent}
/>

// CartStyle
<button id="delBtn" onClick={() => props.delete(props.id)} className="btn btn-primary my-2">Delete</button>

Button's onclick records the i tag instead of the button itself

You could use currentTarget instead:

console.log(event.currentTarget.id);

This will return the currentTarget that you have attached your onClick function on, not the target that triggers the event.

Function onclick event listener that uses the id of the clicked button within the function

The problem is that you're using an arrow function in button.addEventListener(). Arrow functions get this from the scope where they were created, so it doesn't contain the element that you clicked on.

You can use event.target or button in place of this, e.g.

let playerSelection = button.id;

or

let playerSelection = event.target.id;

Or you can change the arrow function to a traditional function:

button.addEventListener("click", function(event) {
    ...
});

Another suggestion: rather than passing the ID around, just pass the element itself. This saves you from having to call document.getElementById() all over the place when you want to do something with the element.

How to get id of a button from a group of buttons on click event using Pure Javascript

Probably you are executing your code before the DOM is fully loaded. You can either place the code at the bottom of the body or wrap your code with DOMContentLoaded:

The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

Please Note: As getElementsByTagName() returns HTMLCollection which maintains 0 based indexing, you are iterating your loop more than the length of buttons, change <= to <.

<script>  document.addEventListener('DOMContentLoaded', (event) => {    var buttons = document.getElementsByTagName("button");    var buttonsCount = buttons.length;    for (let i = 0; i < buttonsCount; i++) {      buttons[i].onclick = function(e) {        alert(this.id);      };    }  });</script>

<div class="row mb-5" id="widthRow">  <div class="col-md-12 mx-auto">  <p class="text-info font-weight-bold">Width :-</p>  <button class="btn btn-sm btn-success w" id="200">200px</button>  <button class="btn btn-sm btn-success w" id="400">400px</button>  <button class="btn btn-sm btn-success w" id="600">600px</button>  <button class="btn btn-sm btn-success w" id="800">800px</button> </div> </div>