How to pass the id of an element that triggers an onclick event to the event handling function

Question

How do I pass the id of an element that triggers an onclick event to the event handling function   I am doing something like this-   lt link onclick  doWithThisElement id of this element     gt

User · Answer

Use this    lt link onclick  doWithThisElement this attributes  id   value     gt    In the context of the onclick JavaScript  this refers to the current element  which in this case is the whole HTML element link

User · Answer

The element that triggered the event can be different than the one you bound the handler to because events bubble up the DOM tree   So if you want to get the ID of the element the event handler is bound to  you can do this easily with this id  this refers to the element    But if you want to get the element where the event originated  then you have to access it with event target in W3C compatible browsers and event srcElement in IE 8 and below   I would avoid writing a lot of JavaScript in the onXXXX HTML attributes  I would only pass the event object and put the code to extract the element in the handler  or in an extra  function     lt div onlick  doWithThisElement event   gt    Then the handler would look like this   function doWithThisElement event        event   event    window event     IE     var target   event target    event srcElement     IE      var id   target id                I suggest to read the excellent articles about event handling at quirksmode org     Btw   lt link onclick  doWithThisElement id of this element     gt    does hardly make sense   lt link gt  is an element that can only appear in the  lt head gt   binding an event handler  if even possible  will have no effect

User · Answer

I would suggest the use of jquery mate   With jQuery you would then be able to get the id of this element by       this  attr  id      without jquery  if I remember correctly we used to access the id with a      this id   Hope that helps

User · Answer

Instead of passing the ID  you can just pass the element itself    lt link onclick  doWithThisElement this     gt    Or  if you insist on passing the ID    lt link id  foo  onclick  doWithThisElement this id     gt    Here s the JSFiddle Demo   http   jsfiddle net dRkuv

User · Answer

Here s a non-standard but cross-browser method that may be useful if you don t want to pass any arguments -  Html    lt div onclick myHandler   id  my element s id  gt  amp rarr  Click Here   amp larr  lt  div gt    Script   function myHandler        alert myHandler caller arguments 0  target id      Demo  http   codepen io mrmoje pen ouJtk

User · Answer

lt  DOCTYPE html gt   lt html gt   lt head gt   lt script src  http   ajax googleapis com ajax libs jquery 1 8 2 jquery js  gt  lt  script gt    lt script type  text javascript  src  jquery-2 1 0 js  gt  lt  script gt    lt script type  text javascript   gt  function openOnImageClick event      alert  Jai Sh Raam       document getElementById  images   src    fruits jpg   var target   event target    event srcElement     IE  console log target   console log target id    var img   document createElement  img     img setAttribute  src   target src     img setAttribute  width    200       img setAttribute  height    150      document getElementById  images   appendChild img          lt  script gt   lt  head gt   lt body gt    lt h1 gt Screen Shot View lt  h1 gt   lt p gt Click the Tiger to display the Image lt  p gt    lt div id  images   gt   lt  div gt    lt img id  muID1  src  tiger jpg  width  100  height  50  alt  unfinished bingo card  onclick  openOnImageClick event     gt   lt img id  myID2  src  sabaLogo1 jpg  width  100  height  50  alt  unfinished bingo card  onclick  openOnImageClick event     gt    lt  body gt   lt  html gt

[javascript] How to pass the id of an element that triggers an `onclick` event to the event handling function

Examples related to javascript

Examples related to html