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>

回答1:

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);

回答2:

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>

回答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

回答4:

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

回答5:

Use Jquery instead

HTML

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

Javascript

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

来源：https://stackoverflow.com/questions/30499447/determine-which-button-was-clicked-inside-a-div

标签

javascript

buttonclick