Следующий элемент при нажатии на кнопку JS

Question

Следующая задача: мне нужно чтобы на кнопку "Выбрать следующий элемент", оно выбирало каждый раз следующий элемент. Сделал как знал, но оно выбирает только 2 элемент, я не знаю как правильно организовать цикл. Спасибо!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Homework 1</title>
</head>
<body>
    <ul id="list-items">
        <li>Элемент №1</li>
        <li>Элемент №2</li>
        <li>Элемент №3</li>
        <li>Элемент №4</li>
        <li>Элемент №5</li>
        <li>Элемент №6</li>
        <li>Элемент №7</li>
    </ul>
    <button onclick="firstElem()">Выбрать первый элемент</button>
    <button onclick="lastElem()">Выбрать последний элемент</button>
    <button onclick="nextElem()">Выбрать следующий элемент</button>
    <script>
        function firstElem() {
            var list = document.getElementById("list-items");
            var item = list.firstElementChild;
                item.style.color = "blue";
        }
        function lastElem() {
            var list = document.getElementById("list-items");
            var item = list.lastElementChild;
                item.style.color = "green";
        }
        function nextElem() {
            var list = document.getElementById("list-items");
            var item = list.firstElementChild;
                item = item.nextElementSibling;
                item.style.color = "red";
        }
    </script>
</body>
</html>

Answer 1

Нужна независимая внешнаяя переменная, которая будет запоминать номер последнего выбранного элемента:

var index = 0;
function nextElem() {
  var list = document.querySelectorAll("#list-items li");
  for( var i = 0; i < list.length; i++ ) {
    list[i].style.color = "";
  }
  list[index].style.color = "red";
  
  var demo = index;
  
  index = (index + 1) % list.length;
  
  console.clear();
  console.log( '(' + demo + ' + 1) % ' + list.length + ' = ' + index );
}

function firstElem() {
  var list = document.getElementById("list-items");
  list.firstElementChild.style.color = "blue";
}

function lastElem() {
  var list = document.getElementById("list-items");
  list.lastElementChild.style.color = "green";
}

<ul id="list-items">
  <li>Элемент №0</li>
  <li>Элемент №1</li>
  <li>Элемент №2</li>
  <li>Элемент №3</li>
  <li>Элемент №4</li>
  <li>Элемент №5</li>
  <li>Элемент №6</li>
</ul>
<button onclick="firstElem()">Выбрать первый элемент</button>
<button onclick="lastElem()">Выбрать последний элемент</button>
<button onclick="nextElem()">Выбрать следующий элемент</button>

Другой вариант решения:

var btn = {
  first: document.getElementById('select-first'),
  prev: document.getElementById('select-prev'),
  next: document.getElementById('select-next'),
  last: document.getElementById('select-last'),
}; // (*1)

var items = document.querySelectorAll("#list-items > li");
var index = 0;

btn.first.addEventListener('click', function() {
  index = 0;
  updateSelection();
});

btn.last.addEventListener('click', function() {
  index = items.length - 1;
  updateSelection();
});

btn.next.addEventListener('click', function() {
  index = (index + 1) % items.length;
  updateSelection();
});

btn.prev.addEventListener('click', function() {
  index = (index + items.length - 1) % items.length; // (*2)
  updateSelection();
});

/***/

function updateSelection() {
  var active = document.querySelector('#list-items > li.active'); // (*3)
  
  if( active ) active.classList.remove('active');
  
  items[index].classList.add('active');
}

<style>
  #list-items li.active { color: red; }
</style>

<ul id="list-items">
  <li>Элемент №0</li>
  <li>Элемент №1</li>
  <li>Элемент №2</li>
  <li>Элемент №3</li>
  <li>Элемент №4</li>
  <li>Элемент №5</li>
  <li>Элемент №6</li>
</ul>

<button id="select-first">Первый</button>
<button id="select-prev">Предыдущий</button>
<button id="select-next">Следующий</button>
<button id="select-last">Последний</button>

(*1) Объекты в JavaScript — их используют для хранения различных данных, но иногда можно просто для удобства, сгруппировать туда схожие элементы.

(*2) index = (index + items.length - 1) % items.length;

a % b возвращает остаток от деления a на b.

У вас изначально index → 0, а items.length → 7, Чтобы легче понять, что происходит при клике, полезно где-нибудь пошагово всё записать...

(0 + 7 - 1) % 7 =  6 % 7 = 6   // 6 на 7 не делится, остаток: 6
(6 + 7 - 1) % 7 = 12 % 7 = 5
(5 + 7 - 1) % 7 = 11 % 7 = 4
...

(*3) document.querySelector('#list-items > li.active') — querySelector без All, возвращает первый соответствующий элемент на странице, или null, если ничего не найдет.

#list-items > li.active — элемент <li> с классом active, который находится непосредственно внутри id="list-items"

CSS - селекторы

Answer 2

Вы можете получить дочерние элементы узла, с помощью свойства children у вашего ParentNode и дальше, перебираете его получившийся элемент потомков, пример как можно это сделать прикладываю к ответу.

let index = 0;
const nextelement = () => {
  const list = document.getElementById('list-items').children;
  if (index !== 0) {
    list[index - 1].style.color = 'black';
  }
  if (index >= list.length) index = 0;
  list[index].style.color = 'red';
  index += 1;
};

document.getElementById('btnNext').addEventListener('click', () => {
  nextelement()
});

<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Homework 1</title>
</head>

<body>
  <ul id="list-items">
    <li>Элемент №1</li>
    <li>Элемент №2</li>
    <li>Элемент №3</li>
    <li>Элемент №4</li>
    <li>Элемент №5</li>
    <li>Элемент №6</li>
    <li>Элемент №7</li>
  </ul>
  <button id="btnNext">Выбрать следующий элемент</button>
</body>

</html>

БЛОГ НА HUSL

Следующий элемент при нажатии на кнопку JS

Ответы (2 шт):