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

У меня есть следующий HTML-код (я не могу его изменить), и я хочу сделать код javascript, чтобы определить, какая кнопка из тех, что были нажаты от A до Z. Любая идея, как я могу это сделать? Вот что я пробовал, но всегда получаю результат "алфавит". Я мог бы также написать:

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>

javascript buttonclick
person Florin Frătică    schedule 28.05.2015    source источник

Ответы (4)


arrow_upward
3
arrow_downward

Функции обработчика событий запускаются в контексте элемента, к которому они привязаны, а не элемента, который использовался для запуска события.

Вам нужно захватить объект события.

function buton(event) {

а затем посмотрите на цель клика

var element = event.target

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

alert(element.id);
person Quentin    schedule 28.05.2015

arrow_upward
3
arrow_downward

Вы можете использовать объект события

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>

person Arun P Johny    schedule 28.05.2015
comment
Именно то, что мне было нужно! Спасибо +1 - person enthusiasticgeek; 31.10.2018

arrow_upward
2
arrow_downward

Попробуйте код, описанный ниже:

 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>

Вот рабочая скрипка

person Tharif    schedule 28.05.2015
comment
Это вызовет исключение, потому что e не определено. - person Quentin; 25.10.2017
comment
@Quentin, пожалуйста, проверьте весь код. Пробовал и в скрипке. - person Tharif; 25.10.2017
comment
Повторное редактирование: просто измените одну строку — вы изменили более одной строки. - person Quentin; 25.10.2017
comment
@Quentin, спасибо, что указали на это ... я думаю, что у OP есть код: alert (this.id); , который с некоторыми изменениями кода я реализовал с помощью alert(e.target.id); вот причина этого ответа .. в любом случае отредактирую эту строку, если ошибусь, - person Tharif; 25.10.2017

arrow_upward
-1
arrow_downward

Вместо этого используйте Jquery

HTML

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

Javascript

 $("button").Click(function(){
       alert($(this).attr("id"))
  })
person user786    schedule 28.05.2015