title: Determine which button was clicked inside a div
body: <p>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 &quot;alphabet&quot;. I could also write:</p>
  <pre class="lang-js prettyprint-override"><code>document.getElementById(&quot;A&quot;).onclick = button;
  document.getElementById(&quot;B&quot;).onclick = button;
  </code></pre>
  <p>and so on inside <code>myMain</code> function but is there a simple solution?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;script&gt;
      function myMain() {
        document.getElementById("alphabet").onclick = button;
      }
  
      function button() {
        alert(this.id);
      }
  
      window.onload = myMain;
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="alphabet"&gt;
      &lt;button id="A"&gt;A&lt;/button&gt; &lt;button id="B"&gt;B&lt;/button&gt; &lt;button id="C"&gt;C&lt;/button&gt; &lt;button id="D"&gt;D&lt;/button&gt; &lt;button id="E"&gt;E&lt;/button&gt; &lt;button id="F"&gt;F&lt;/button&gt;
      &lt;button id="G"&gt;G&lt;/button&gt; &lt;button id="H"&gt;H&lt;/button&gt; &lt;button id="I"&gt;I&lt;/button&gt; &lt;button id="J"&gt;J&lt;/button&gt; &lt;button id="K"&gt;K&lt;/button&gt; &lt;button id="L"&gt;L&lt;/button&gt;
      &lt;button id="M"&gt;M&lt;/button&gt; &lt;button id="N"&gt;N&lt;/button&gt; &lt;button id="O"&gt;O&lt;/button&gt; &lt;button id="P"&gt;P&lt;/button&gt; &lt;button id="Q"&gt;Q&lt;/button&gt; &lt;button id="R"&gt;R&lt;/button&gt;
      &lt;button id="S"&gt;S&lt;/button&gt; &lt;button id="T"&gt;T&lt;/button&gt; &lt;button id="U"&gt;U&lt;/button&gt; &lt;button id="V"&gt;V&lt;/button&gt; &lt;button id="W"&gt;W&lt;/button&gt; &lt;button id="X"&gt;X&lt;/button&gt;
      &lt;button id="Y"&gt;Y&lt;/button&gt; &lt;button id="Z"&gt;Z&lt;/button&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>