Javascript – Determine which button was clicked inside a div

dom-eventshtmljavascript

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>

Best Solution

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>