Determine which button was clicked inside a div

javascript html dom-events

15,179

Solution 1

You can use event object

window.onload = myMain;

function myMain() {
  document.getElementById("alphabet").onclick = buton;
}

function buton(e) {
  if (e.target.tagName == 'BUTTON') {
    alert(e.target.id);
  }
}

<div id="alphabet">
  <button id="A">A</button>
  <button id="B">B</button>
  <button id="C">C</button>
  <button id="D">D</button>
  <button id="E">E</button>
  <button id="F">F</button>
  <button id="G">G</button>
  <button id="H">H</button>
  <button id="I">I</button>
  <button id="J">J</button>
  <button id="K">K</button>
  <button id="L">L</button>
  <button id="M">M</button>
  <button id="N">N</button>
  <button id="O">O</button>
  <button id="P">P</button>
  <button id="Q">Q</button>
  <button id="R">R</button>
  <button id="S">S</button>
  <button id="T">T</button>
  <button id="U">U</button>
  <button id="V">V</button>
  <button id="W">W</button>
  <button id="X">X</button>
  <button id="Y">Y</button>
  <button id="Z">Z</button>
</div>

Solution 2

Event handler functions are fired in the context of the element to which they are bound, not the element which was used to trigger the event.

You need to capture the event object:

function button(event){
  // …
}

and then look at the target of the click:

const element = event.target;

You can then look at that element’s id:

console.log(element.id);

Solution 3

Try Code Explained below :

 alert(e.target.id);

You can use e.target.id. e.target represents DOM object and you can access all its property and methods.

        window.onload = myMain;
        function myMain() {
            document.getElementById("alphabet").onclick = buton;
        }
      
function buton(e) {
   
    alert(e.target.id);

}

<body>
    <div id="alphabet">
        <button id="A">A</button> <button id="B">B</button> <button id="C">C</button> <button id="D">D</button> <button id="E">E</button> <button id="F">F</button> 
        <button id="G">G</button> <button id="H">H</button> <button id="I">I</button> <button id="J">J</button> <button id="K">K</button> <button id="L">L</button> 
        <button id="M">M</button> <button id="N">N</button> <button id="O">O</button> <button id="P">P</button> <button id="Q">Q</button> <button id="R">R</button> 
        <button id="S">S</button> <button id="T">T</button> <button id="U">U</button> <button id="V">V</button> <button id="W">W</button> <button id="X">X</button> 
        <button id="Y">Y</button> <button id="Z">Z</button>
    </div>
</body>

Here is the working fiddle

15,179

Author by

Florin Frătică

Updated on June 15, 2022

Comments

Florin Frătică almost 2 years

I have the following HTML code (I can’t change it) and I want to determine which button of these, from A to Z, was clicked. Any idea how I can do this? Here is what I tried, but I always get the result "alphabet". I could also write:

document.getElementById("A").onclick = button;
document.getElementById("B").onclick = button;

and so on inside myMain function but is there a simple solution?

<html>

<head>
  <script>
    function myMain() {
      document.getElementById("alphabet").onclick = button;
    }

    function button() {
      alert(this.id);
    }

    window.onload = myMain;
  </script>
</head>

<body>
  <div id="alphabet">
    <button id="A">A</button> <button id="B">B</button> <button id="C">C</button> <button id="D">D</button> <button id="E">E</button> <button id="F">F</button>
    <button id="G">G</button> <button id="H">H</button> <button id="I">I</button> <button id="J">J</button> <button id="K">K</button> <button id="L">L</button>
    <button id="M">M</button> <button id="N">N</button> <button id="O">O</button> <button id="P">P</button> <button id="Q">Q</button> <button id="R">R</button>
    <button id="S">S</button> <button id="T">T</button> <button id="U">U</button> <button id="V">V</button> <button id="W">W</button> <button id="X">X</button>
    <button id="Y">Y</button> <button id="Z">Z</button>
  </div>
</body>

</html>