CODEWITHSUNDEEP
javascripthtml
abu abu
abu abu

Reputation: 7028

Click event in plain JavaScript

How to know the id of current Html element when clicking on a Html element using plain JavaScript?

<div id="myId">
  <div>
    <h2>First Div</h2>
  </div>
  <div>
    <h2>Second Div</h2>
  </div>
</div>

I would like to catch "myId" while I am clicking on the body of this div. That means I would like to get the ID of parent div when I click on First Div and Second Div.

My JS code is like below.

document.onclick = function(e) {
   alert(e.target.id)
}

Upvotes: 1

Views: 9949

Answers (4)

Mamun
Mamun

Reputation: 68933

You can do that in the following way:

var div = document.getElementById('myId');
div.addEventListener('click', function(e){
  console.log(this.getAttribute('id'))
});
<div id="myId">
  <div>
    <h2>First Div</h2>
  </div>
  <div>
    <h2>Second Div</h2>
  </div>
</div>

Upvotes: 10

eyes_only
eyes_only

Reputation: 11

You can just write a function:

function showid(elem) { 
    var id = elem.id
    console.log(id)
    alert(id)
}

And in your HTML code:

<div id="myId" onclick="showid(this)">
  <div>
    <h2>First Div</h2>
  </div>
  <div>
    <h2>Second Div</h2>
  </div>
</div>

Upvotes: 1

user320487
user320487

Reputation:

event.currentTarget will be the dom element that the event is triggered by.

Upvotes: 4

user1641172
user1641172

Reputation:

You can do it like this in vanilla JS, register an event handler on the document and retrieve the id of the clicked element:

document.addEventListener("click", function(e){
    alert(e.srcElement.id);
});
<p id="paragraph1">First Paragraph</p>

<button id="myButton">Click Me</button>

Upvotes: 0

Related Questions