узнать ID li элемента

#javascript

Как при клике на элемент списка можно узнать его id, без использования атрибута 
onclick в li. Только на чистом JS, без Jquery.


            
Red
            
Green
            
Blue
        

    

Ответы

Ответ 1

onClick вообще не рекомендуется использовать. Причин достаточно, см. гугл.
Чтобы не трогать вообще элементы li, можно делегировать обработчик на ul и с него
определять id.
Приятная плюшка в том, что теперь можно динамически добавлять/убирать элементы li
- код будет работать, тогда как навешивание кучи обработчиков на каждый элемент имеет
две плохие стороны: на новые новые элементы действовать не будет и куча ненужных обработчиков,
что плохо :)
Пример:



document.querySelector('#drag').addEventListener('click', function(e){ // Вешаем
обработчик клика на UL, не LI
  var id = e.target.id; // Получили ID, т.к. в e.target содержится элемент по которому
кликнули
  document.querySelector('#test strong').innerHTML = id; // For example
});
li{
  cursor: pointer;
}

  
Red
  
Green
  
Blue




Вы выбрали ничего


Ответ 2

Элементарно:

var inputs = document.getElementsByTagName("li");
for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener("click", myFunction);
}

function myFunction() {
    alert(this.id);
}