JavaScript - onClick to get the ID of the clicked button

Question

How do find the id of the button which is being clicked    lt button id  1  onClick  reply click    gt  lt  button gt   lt button id  2  onClick  reply click    gt  lt  button gt   lt button id  3  onClick  reply click    gt  lt  button gt   function reply click

User · Answer

This will log the id of the element that s been clicked  addFields    lt button id  addFields  onclick  addFields    gt   lt  button gt    lt script gt   function addFields         console log event toElement id      lt  script gt

User · Answer

You need to send the ID as the function parameters  Do it like this    x000D   x000D   lt button id  1  onClick  reply click this id   gt B1 lt  button gt  x000D   lt button id  2  onClick  reply click this id   gt B2 lt  button gt  x000D   lt button id  3  onClick  reply click this id   gt B3 lt  button gt  x000D       x000D   lt script type  text javascript  gt  x000D    function reply click clicked id  x000D      x000D        alert clicked id   x000D      x000D   lt  script gt  x000D   x000D   x000D    This will send the ID this id as clicked id which you can use in your function  See it in action here

User · Answer

Although it s 8  years late  in reply to  Amc rtty  to get dynamically generated IDs from  my  HTML  I used the index of the php loop to increment the button IDs  I concatenated the same indices to the ID of the input element  hence I ended up with id  quot tableview1 quot  and button id  quot 1 quot  and so on   tableView     quot  lt td gt  lt input type  hidden  value  http    quot    SERVER  HTTP HOST    quot  sql update php id  quot   mysql rows 0   quot  amp table  quot   theTable  quot  id  tableview quot   mysql rows 0   quot   gt  lt button type  button  onclick  loadDoc event   id   quot   mysql rows 0   quot   gt Edit lt  button gt  lt  td gt  quot     In the javascript  I stored the button click in a variable and added it to the element  function loadDoc e      var btn   e target id    var xhttp   new XMLHttpRequest      var page   document getElementById  quot tableview quot  btn  value         other Ajax stuff

User · Answer

Sorry its a late answer but its really quick if you do this  -    document  ready function          button   on  click   function          alert  this id               This gets the ID of any button clicked   If you want to just get value of button clicked in a certain place  just put them in container like    lt div id    myButtons  gt  buttons here  lt  div gt    and change the code to  -     document  ready function               myButtons button   on  click   function              alert  this id                       I hope this helps

User · Answer

lt button id  1  onClick  reply click this   gt  lt  button gt   lt button id  2  onClick  reply click this   gt  lt  button gt   lt button id  3  onClick  reply click this   gt  lt  button gt   function reply click obj    var id   obj id

User · Answer

USING PURE JAVASCRIPT  I know it s late but may be for the future people it can help   In the HTML part    lt button id  1  onClick  reply click    gt  lt  button gt   lt button id  2  onClick  reply click    gt  lt  button gt   lt button id  3  onClick  reply click    gt  lt  button gt    In the Javascipt Controller   function reply click         alert event srcElement id       This way we don t have to bind the  id  of the Element at the time of calling the javascript function

User · Answer

In general  things are easier to keep organized if you separate your code and your markup  Define all of your elements  and then in your JavaScript section  define the various actions that should be performed on those elements   When an event handler is called  it s called within the context of the element that was clicked on  So  the identifier this will refer to the DOM element that you clicked on  You can then access attributes of the element through that identifier   For example    lt button id  1  gt Button 1 lt  button gt   lt button id  2  gt Button 2 lt  button gt   lt button id  3  gt Button 3 lt  button gt    lt script type  text javascript  gt  var reply click   function         alert  Button clicked  id   this id    text  this innerHTML     document getElementById  1   onclick   reply click  document getElementById  2   onclick   reply click  document getElementById  3   onclick   reply click   lt  script gt

User · Answer

With pure javascript you can do the following   var buttons   document getElementsByTagName  button    var buttonsCount   buttons length  for  var i   0  i  lt  buttonsCount  i    1        buttons i  onclick   function e            alert this id               check it On JsFiddle

User · Answer

lt button id  1  onClick  reply click    gt  lt  button gt   lt button id  2  onClick  reply click    gt  lt  button gt   lt button id  3  onClick  reply click    gt  lt  button gt   function reply click        console log window event target id

User · Answer

lt button id  1  class  clickMe  gt  lt  button gt   lt button id  2  class  clickMe  gt  lt  button gt   lt button id  3  class  clickMe  gt  lt  button gt    lt script gt      clickMe   click function        alert this id        lt  script gt

User · Answer

Button 1 Button 2 Button 3  var reply click   function           alert  Button clicked  id   this id    text  this innerHTML       document getElementById  1   onclick   reply click   document getElementById  2   onclick   reply click   document getElementById  3   onclick   reply click

User · Answer

How to do it without inline JavaScript it is generally recommended to avoid inline JavaScript  but rarely is there an example of how to do it  Here is my way of attaching events to buttons  I m not entirely happy with how much longer the recommended method is compared to a simple onClick attribute  2014 browsers only  lt button class  quot btn quot  id  quot b1 quot  gt Button lt  button gt   lt script gt  let OnEvent    doc    gt        return           on   event  className  callback    gt                doc addEventListener  click    event   gt                   if  event target classList contains className   return                  callback call event target  event                  false                        OnEvent document  on  click    btn   function  e        window console log this id  e         lt  script gt   2013 browsers only  lt  DOCTYPE html gt   lt html gt   lt head gt   lt script gt   function doc       var hasClass   function el className            return el classList contains className             doc addEventListener  click   function e         if hasClass e target   click-me               e preventDefault              doSomething call e target  e                      document    function insertHTML str     var s   document getElementsByTagName  script    lastScript   s s length-1     lastScript insertAdjacentHTML  quot beforebegin quot   str      function doSomething event     console log this id      this will be the clicked element    lt  script gt   lt  --    other head stuff    -- gt   lt  head gt   lt body gt    lt  --Best if you inject the button element with javascript if you plan to support users with javascript disabled-- gt   lt script gt  insertHTML   lt button class  quot click-me quot  id  quot btn1 quot  gt Button 1 lt  button gt      lt  script gt    lt  --Use this when you don t care about broken buttons when javascript is disabled -- gt   lt  --buttons can be used outside of forms https   stackoverflow com a 14461672 175071 -- gt   lt button class  quot click-me quot  id  quot btn2 quot  gt Button 2 lt  button gt   lt input class  quot click-me quot  type  quot button quot  value  quot Button 3 quot  id  quot btn3 quot  gt    lt  --Use this when you want to lead the user somewhere when javascript is disabled-- gt   lt a class  quot click-me quot  href  quot  path to non-js action quot  id  quot btn4 quot  gt Button 4 lt  a gt    lt  body gt   lt  html gt   Cross-browser  lt  DOCTYPE html gt   lt html gt   lt head gt   lt script type  quot text javascript quot  gt   function doc       var cb addEventListener   function obj  evt  fnc               W3C model         if  obj addEventListener                obj addEventListener evt  fnc  false               return true                        Microsoft model         else if  obj attachEvent                return obj attachEvent  on    evt  fnc                        Browser don t support W3C or MSFT model  go on with traditional         else               evt    on  evt              if typeof obj evt       function                       Object already has a function on traditional                    Let s wrap it with our own function inside another function                 fnc    function f1 f2                       return function                            f1 apply this arguments                           f2 apply this arguments                                            obj evt   fnc                             obj evt    fnc              return true                    return false             var hasClass   function el className            return        el className        indexOf       className         gt  -1             cb addEventListener doc   click   function e         if hasClass e target   click-me               e preventDefault   e preventDefault     e returnValue   false            doSomething call e target  e                      document    function insertHTML str     var s   document getElementsByTagName  script    lastScript   s s length-1     lastScript insertAdjacentHTML  quot beforebegin quot   str      function doSomething event     console log this id      this will be the clicked element    lt  script gt   lt  --    other head stuff    -- gt   lt  head gt   lt body gt    lt  --Best if you inject the button element with javascript if you plan to support users with javascript disabled-- gt   lt script type  quot text javascript quot  gt  insertHTML   lt button class  quot click-me quot  id  quot btn1 quot  gt Button 1 lt  button gt      lt  script gt    lt  --Use this when you don t care about broken buttons when javascript is disabled -- gt   lt  --buttons can be used outside of forms https   stackoverflow com a 14461672 175071 -- gt   lt button class  quot click-me quot  id  quot btn2 quot  gt Button 2 lt  button gt   lt input class  quot click-me quot  type  quot button quot  value  quot Button 3 quot  id  quot btn3 quot  gt    lt  --Use this when you want to lead the user somewhere when javascript is disabled-- gt   lt a class  quot click-me quot  href  quot  path to non-js action quot  id  quot btn4 quot  gt Button 4 lt  a gt    lt  body gt   lt  html gt   Cross-browser with jQuery  lt  DOCTYPE html gt   lt html gt   lt head gt   lt script type  quot text javascript quot  gt   function           document  on  click     click-me   function e         doSomething call this  e              jQuery    function insertHTML str     var s   document getElementsByTagName  script    lastScript   s s length-1     lastScript insertAdjacentHTML  quot beforebegin quot   str      function doSomething event     console log this id      this will be the clicked element    lt  script gt   lt  --    other head stuff    -- gt   lt  head gt   lt body gt    lt  --Best if you inject the button element with javascript if you plan to support users with javascript disabled-- gt   lt script type  quot text javascript quot  gt  insertHTML   lt button class  quot click-me quot  id  quot btn1 quot  gt Button 1 lt  button gt      lt  script gt    lt  --Use this when you don t care about broken buttons when javascript is disabled -- gt   lt  --buttons can be used outside of forms https   stackoverflow com a 14461672 175071 -- gt   lt button class  quot click-me quot  id  quot btn2 quot  gt Button 2 lt  button gt   lt input class  quot click-me quot  type  quot button quot  value  quot Button 3 quot  id  quot btn3 quot  gt    lt  --Use this when you want to lead the user somewhere when javascript is disabled-- gt   lt a class  quot click-me quot  href  quot  path to non-js action quot  id  quot btn4 quot  gt Button 4 lt  a gt    lt  body gt   lt  html gt   You can run this before the document is ready  clicking the buttons will work because we attach the event to the document  Here is a jsfiddle For some strange reason the insertHTML function does not work in it even though it works in all my browsers  You can always replace insertHTML with document write if you don t mind it s drawbacks  lt script gt  document write   lt button class  quot click-me quot  id  quot btn1 quot  gt Button 1 lt  button gt      lt  script gt   Sources   What are alternatives to document write  Check if an element contains a class in JavaScript  event preventDefault   function not working in IE https   gist github com eduardocereto 955642

User · Answer

lt button id  1 class  clickMe  gt  lt  button gt    lt button id  2  class  clickMe  gt  lt  button gt    lt button id  3  class  clickMe  gt  lt  button gt         clickMe   live  click  function     var clickedID   this id

User · Answer

You can simply do it this way      lt input type  button  id  1234  onclick  showId this id   value  click me to show my id   gt   lt script type  text javascript  gt     function showId obj            var id obj          alert id

User · Answer

This is improvement of Prateek answer - event is pass by parameter so reply click not need to use global variable  and as far no body presents this variant   x000D   x000D  function reply click e      console log e target id     x000D   lt button id  1  onClick  reply click event   gt B1 lt  button gt   lt button id  2  onClick  reply click event   gt B2 lt  button gt   lt button id  3  onClick  reply click event   gt B3 lt  button gt  x000D   x000D   x000D

User · Answer

If you don t want to pass any arguments to the onclick function  just use event target to get the clicked element    lt button id  1  onClick  reply click    gt  lt  button gt   lt button id  2  onClick  reply click    gt  lt  button gt   lt button id  3  onClick  reply click    gt  lt  button gt   function reply click            event target is the element that is clicked  button in this case       console log event target id

User · Answer

I think the id attribute needs to start with a letter  Could be wrong    You could go for event delegation      lt div onClick  reply click    gt       lt button id  1  gt  lt  button gt       lt button id  2  gt  lt  button gt       lt button id  3  gt  lt  button gt   lt  div gt   function reply click e        e   e    window event      e   e target    e srcElement      if  e nodeName      BUTTON             alert e id                but that requires you to be relatively comfortable with the wacky event model

[javascript] JavaScript - onClick to get the ID of the clicked button

Examples related to javascript

Examples related to html