Determine which button was clicked inside a div

I have the following HTML code (I can't change it) and I want to do a javascript code to determine which button of those 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 = buton;, 
document.getElementById("B").onclick = buton; 

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

<html>
<head>
    <script>
        window.onload = myMain;
        function myMain() {
            document.getElementById("alphabet").onclick = buton;
        }
        function buton() {
            alert(this.id);
        }
    </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>

Answers:

Answer

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 buton(event) {

and then look at the target of the click

var element = event.target

You can then look at that element's id

alert(element.id);
Answer

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>

Answer

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

Answer
var buttonElements = document.querySelectorAll('#alphabet button');
for (var i = 0;i < buttonElements.length;i++){
    buttonElements[i].addEventListener('click',function(){
        alert(this.getAttribute('id'));
    });
};
Answer

Use Jquery instead

HTML

<div>
   <input type="button" id="A"/>
   <input type="button" id="B"/>
 </div>

Javascript

 $("button").Click(function(){
       alert($(this).attr("id"))
  })

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.