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

59
4

Вот 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]). Я делал это много раз в прошлом, но я думаю, что здесь есть кое-что фундаментальное, чего мне не хватает.

спросил(а) 2018-12-18T19:11:00+03:00 1 год, 2 месяца назад
1
Решение
49

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

ответил(а) 2018-12-18T19:15:00+03:00 1 год, 2 месяца назад
35

Здесь простое решение.

// 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>

ответил(а) 2018-12-18T19:19:00+03:00 1 год, 2 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема