Перебор элементов списка для установки значений декора

Question

Я хочу использовать for-l oop для перехода к каждому элементу списка в коде HTML, чтобы установить их украшения ...

const items = document.querySelectorAll('#players li');
items.forEach((item, index) => {
  if (index === 2) {
    document.getElementById("players").style.textDecoration = "underline";
  }
})

 <section id="players">
      <h1>Players</h1>
      <ol>
        <li>Alice</li>
        <li>Bob</li>
        <li>Cesar</li>
      </ol>
</section>

Как сделать, чтобы каждый элемент был подчеркнут, но не <h1>Players</h1>, используя мой код javascript?

Answer 1

Просто l oop только поверх элементов li, но не проверяйте index ==2 и устанавливайте style на item в l oop, а не в заголовке.

const items = document.querySelectorAll('#players li');
items.forEach((item, index) => {
    item.style.textDecoration = "underline";
})

<section id="players">
      <h1>Players</h1>
      <ol>
        <li>Alice</li>
        <li>Bob</li>
        <li>Cesar</li>
      </ol>
</section>

И, конечно же, JavaScript для этого совсем не нужен, можно просто CSS:

#players li { text-decoration:underline; }

<section id="players">
      <h1>Players</h1>
      <ol>
        <li>Alice</li>
        <li>Bob</li>
        <li>Cesar</li>
      </ol>
</section>

Answer 2

Вы выбираете элементы li, но внутри l oop вы устанавливаете стиль для элемента #players, когда index = 2. Просто удалите условие if внутри l oop.

const items = document.querySelectorAll('#players li');

items.forEach(item => item.style.textDecoration = "underline");

<section id="players">
  <h1>Players</h1>
  <ol>
    <li>Alice</li>
    <li>Bob</li>
    <li>Cesar</li>
  </ol>
</section>