Javascript получить элемент, который был нажат на основе ClassName

Question

Во-первых, я бы создал этот пример в JSFiddle, но они находятся в режиме только для чтения.

Я хотел бы получить конкретный элемент, который был нажат на основе класса.

var button = document.getElementsByClassName("mybutton"); 
button.onclick = function() { 
    //how do I reference the specific button that was clicked? 
}; 

 

<button class="myclass">Button 1</button> 
<button class="myclass">Button 2</button> 

Нет JQuery не отвечает, пожалуйста; это не вариант.

Answer 1

это не document.getElementByClassName, это document.getElementsByClassName.

См. Разницу?

Это легко упустить из вида:

document.getElementByClassName 
document.getElementsByClassName 
       ^

бывших не существует, если не определить его последние работает только в современных браузерах. getElementsByClassName вернет список узлов, который необходимо перебрать для присоединения прослушивателей событий к каждому узлу.

var i, 
    l, 
    buttons, 
    button; 

function clickHandler(e) { 
    console.log(this);//the button that was clicked on 
} 
buttons = document.getElementsByClassName('mybutton'); 
for (i = 0, l = buttons.length; i < l; i++) { 
    button = buttons[i]; 
    button.onclick = clickHandler; 
} 

Answer 2

Первый аргумент в обработчике событий будет ссылка на событие

var button = document.getElementByClassName("mybutton"); 
button.onclick = function(e) { 
    //e.Target is a reference to your button 
};