確定在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內點擊了哪個按鈕

回答

相關問題