Как получить id элемента по которому кликнули?

Question

[DrunkMaster]

Демка https://jsfiddle.net/568ry98w/ клик ловлю а как id'шник дальше получить не знаю.
HTML

<span id="s1" class="text block">one</span><br>
<span id="s2" class="text block">two</span><br>
<span id="s2" class="text block">three</span><br>
<div id="test1"></div>
<div id="test2"></div>

JS

var button = 
document.getElementsByClassName('text block');

document.getElementById("test1").innerHTML = button;

console.log(button);
button[0].onclick = function() {
    document.getElementById("test2").innerHTML = 'click';
}

Answer 1

[Павел Корнилов]

Все верно в посте выше, но грамотнее было бы сократить количество обработчиков, поскольку список может быть большим. При таких однотипных действиях лучше вешать один обработчик - на родительский элемент.

https://jsfiddle.net/vok0zc4r/1/

Answer 2

[dummyman]

UPD Немного изменил решение прямо по вашему заказу

var buttons = document.querySelectorAll('.text.block');
var test1 = document.querySelector('#test1');
var test2 = document.querySelector('#test2');
Array.from(buttons).forEach(function(button){
    button.addEventListener('click', function(e) {
    		test1.innerHTML=e.target.id;
        test2.innerHTML=e.target.innerHTML;
    		console.log(e.target);
    })
});

https://jsfiddle.net/568ry98w/4/

Comments

[DrunkMaster]

Да, всё работает только console.log(e.target.id)

[dummyman]

console.log() - просто выводит результат в консоль.
Вы не работали с такой?
Вызывается с помощью F12
На открывшейся панели ищите вкладку "Консоль"
Потом запустите пример и покликайте

[DrunkMaster]

dummyman: работал, спасибо

[dummyman]

DrunkMaster:
Ну дык туда в параметрconsole.log() можно написать хоть (e), хоть (e.target), хоть (e.target.id).
попробуйте сразу все три последовательно.

console.log(e)
console.log(e.target)
console.log(e.target.id)

[DrunkMaster]

dummyman: Не сообразил что-то сразу..., теперь буду знать

[dummyman]

DrunkMaster: Консоль - лучшая штука для познования недокументированных недр браузеров.
Внизу есть строка ввода, попробуйте вставить в нее и нажать Enter:
console.log(window)
Затем в появившейся строчке нажмите Window, браузер покажет вам все что вы должны знать о нем.
Потом document
console.log(document)
Затем в появившейся строчке нажмите Document, браузер покажет вам все что вы должны знать о нем.

[dummyman]

DrunkMaster:
Потом
console.log(document.querySelectorAll('*'))
В консоль выдаст все теги на странице

[dummyman]

И забудь про использование
document.getElementById()
document.getElementsByClassName()
Это какой-то пережиток 90-х. Реально, их я не использовал последние лет 12