JS DOM внутри цикла for не работает со строкой

Question

Вот HTML:

<ul class="drum">
 <li>A</li>
 <li>S</li>
 <li>D</li>
</ul>

Вот JS:

const Olist = document.querySelectorAll('.drum li');
  for(let i = 0; i < Olist.length; i++){
    Olist[i].addEventListener('click', function(e){
        console.log(`I was clicked ${Olist[i]}`);
    })
 }

Мой console.log () внутри цикла возвращает следующее: I was clicked [object HTMLLIElement] Я неЯ не понимаю, почему я получаю [HTMLLIElement], а не фактический li

РЕДАКТИРОВАТЬ Я пытаюсь понять, почему я не получаю тот же результат, что и когда я просто console.log(Olist[i]).Я делал это много раз в прошлом, но я думаю, что здесь есть кое-что фундаментальное, чего мне не хватает.

Answer 1

Вот простое решение.

// Convert a HTMLCollection to an array, then apply the following code for each item
// within the array.
Array.prototype.slice.call(document.querySelectorAll('.drum li')).map(li => li.onclick = () => {
  const string = li.outerHTML;
  console.log(string + ' Was clicked');
});

<ul class="drum">
 <li>A</li>
 <li>S</li>
 <li>D</li>
</ul>

Answer 2

Вы получаете это значение, потому что I was clicked ${Olist[i]} вызывает .toString() в экземпляре HTMLLIElement.Если вы хотите увидеть HTML-код элемента, попробуйте вызвать I was clicked ${Olist[i].outerHTML}.

const Olist = document.querySelectorAll('.drum li');


for (let i = 0; i < Olist.length; i++) {
  Olist[i].addEventListener('click', function(e) {
    console.log(`I was clicked ${Olist[i].outerHTML}`);
    console.log(`Olist[i].toString() => ${Olist[i].toString()}`);
  })
}

<ul class="drum">
  <li>A</li>
  <li>S</li>
  <li>D</li>
</ul>