确定在div内点击了哪个按钮

我有以下HTML代码（我无法更改它），我想要做一个JavaScript代码来确定从A到Z中的哪些按钮被点击。任何想法我怎么能做到这一点？这是我尝试的，但我总是得到结果“字母”。我也可以这样写：确定在div内点击了哪个按钮

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>

来源

2015-05-28 Florin Frătică

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

来源

2015-05-28 07:08:51 Maplemx

事件处理功能在元件的背景下烧制，以它们所结合，而不是将其用于触发事件的元素。

您需要捕获事件对象。

function buton(event) {

，然后看看点击

var element = event.target

然后你可以看一下该元素的id

alert(element.id);

来源

2015-05-28 07:09:13 Quentin

您可以使用事件对象

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>

的目标

来源

2015-05-28 07:09:51

-1

使用jQuery而不是

HTML

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

的Javascript

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

来源

2015-05-28 07:16:33 Alex

try代码说明如下：

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

来源

2015-05-28 07:34:54 tharif

这将抛出一个异常，因为'e'没有定义。 – Quentin

@Quentin请检查整个code.tried在小提琴 – tharif

重新编辑：“只需更改一行” - 你已经改变了多条线。 – Quentin

确定在div内点击了哪个按钮

回答

相关问题