Determine which button was clicked inside a div
I have the following HTML code (I can't change it) and I want to do a javascript code to determine which button of those from A to Z was clicked. Any idea how I can do this? Here is what I tried, but I always get the result "alphabet". I could also write:
document.getElementById("A").onclick = buton;,
document.getElementById("B").onclick = buton;
and so on inside myMain function but is there a simple solution?
<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
Event handler functions are fired in the context of the element to which they are bound, not the element which was used to trigger the event.
You need to capture the event object.
function buton(event) {
and then look at the target of the click
var element = event.target
You can then look at that element's id
alert(element.id);