Question

我有以下HTML代码（我无法更改），我想做一个javascript代码来确定点击A到Z的那个按钮。知道我怎么能这样做吗？这是我尝试过的，但我总是得到结果＆＃34;字母表＆＃34;。我也可以写：

document.getElementById("A").onclick = buton;, 
document.getElementById("B").onclick = buton;

等myMain函数内部，但有一个简单的解决方案吗？

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

Answer 1

事件处理程序函数在它们绑定到的元素的上下文中触发，而不是用于触发事件的元素。

您需要捕获事件对象。

function buton(event) {

然后查看点击目标

var element = event.target

然后，您可以查看该元素的ID

alert(element.id);

Answer 2

您可以使用事件对象

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

尝试下面的代码说明：

 alert(e.target.id);

您可以使用e.target.id. e.target代表DOM对象，您可以访问其所有属性和方法。

        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是工作小提琴

Answer 4

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

Answer 5

使用Jquery代替

HTML

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

的Javascript

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

确定在div中单击了哪个按钮

5 个答案: