DOM Манипуляции

Question

Я все еще борюсь с этим вопросом.

Добавьте обработчик событий к элементу li и console.log() имя выбранной ими рубашки. Использовать JavaScript

<h3>Shirts</h3>
<ul id='list'>
  <li>Biker Jacket</li>
  <li>Mens Shirt</li>
</ul>

Answer 1

Если я правильно понял ваш вопрос, используйте jQuery:

$('li').click(function() {
  console.log($(this).text());
});

Answer 2

Похоже, это домашнее задание. И что вы новичок в Stackru.

В Stackru вы всегда должны писать фрагменты кода, которые вы пытались выполнить.

В любом случае, потому что вы новичок... Я могу показать вам 2 способа сделать это.

---

Обратите внимание, что я не так хорош в ванильном Javascript. Так что, возможно, есть лучший способ выполнить то, что вы пытаетесь.

---

1) Встроенный обработчик событий

Вы можете добавить встроенные обработчики событий непосредственно в HTML, например так:

<h3>Shirts</h3>
<ul id='list'>
  <li onclick='console.log(this.innerText)'>Biker Jacket</li>
  <li onclick='console.log(this.innerText)'>Mens Shirt</li>
</ul>

2) Не встроенный обработчик событий

Разница здесь в том, что вам нужно обращаться к точным элементам, к которым вы хотите добавить прослушиватель событий. Преимущество этого заключается в том, что вам не нужно вручную добавлять прослушиватель событий в каждый элемент списка. Таким образом, HTML остается чистым.

var list = document.getElementById("list"); // select the parent element
var items = list.getElementsByTagName("li"); // select all <li> items in this parent element

for (var i = 0; i < items.length; i++) { // loop through all items
    items[i].addEventListener("click", function() { // add the click event listener to the item
        console.log(this.innerText); // console.log() the item's text.
    });
}

Также прочитайте следующую документацию MDN, чтобы узнать об используемых функциях:

• getElementById
• getElementByTagName
• Циклы и итерации
• InnerText

Счастливого обучения!