Как я могу console.log второй элемент li с помощью javascript onclick

Question

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

Мне нужно вывести console.log из второго элемента li.Я попробовал приведенный ниже код, но у меня был доступ только к первому элементу li

document.querySelector("li").onclick = () => {
    console.log("Biker Jacket");
};

Answer 1

Есть несколько способов его выбора:

const item = document.querySelector("ul>li:nth-child(2)")

или

const item = document.querySelectorAll('#list li')[1]

или, если это только последняя вещь в любом списке, который вам нужен:

const items = document.querySelectorAll('#list li');
const item = items[items.length-1];

Когда вы выбрали свой элемент, добавьте в него обработчик кликов:

item.addEventListener('click', ()=>{
  console.log(this.innerText);
});

Answer 2

Вы можете использовать псевдоселектор :nth-child(x), чтобы получить элемент в позиции x следующим образом:

document.querySelector("ul#list > li:nth-child(2)").onclick = () => {
    console.log("Biker Jacket");
};

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

Answer 3

Используйте querySelectorAll[1] для второго:

document.querySelector("li").onclick = () => {
    console.log("Biker Jacket");
};
document.querySelectorAll("li")[1].onclick = () => {
    console.log("Mens Shirt");
};

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

И так как кажется, что вы хотите console.log текстовое содержимое элемента списка, по которому щелкнули, вы можете сделать это:

function showText(elem) {
  console.log(elem.innerText);
}
document.querySelectorAll("li").forEach(li => li.addEventListener("click", () => showText(li)));

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

Answer 4

Просто используйте вместо этого метод querySelectorAll() и укажите второй элемент li следующим образом:

document.querySelectorAll("#list li")[1].onclick = () => {
  console.log("Biker Jacket");
};

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

Answer 5

Вы можете передать элемент с помощью этого щелчка мыши и распечатать его текст, используя textContent

function a(e)
{
console.log(e.textContent)
}

<h3>Shirts</h3>
<ul id='list'>
    <li onclick="a(this)">Biker Jacket</li>
    <li onclick="a(this)">Mens Shirt</li>
</ul>