Определить, какая кнопка была нажата внутри 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

Вы можете посмотреть на идентификатор этого элемента

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

Попробуйте код Разъяснения ниже:

alert(e.target.id);

Вы можете use 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

Это будет сгенерировано исключение, потому что 'é' не определенно. – Quentin

@Quentin, пожалуйста, проверьте весь код.tried in fiddle также – tharif

Re edit: «Просто измените одну строку» - вы изменили несколько строк. – Quentin

Определить, какая кнопка была нажата внутри div

ответ

Смежные вопросы