Смена блоков html при помощи цикла JS

Question

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

<div id="di1" style="display: block;">
  Какой-то текст
  <button onclick="next1_2();">Следующий</button>
</div>
<div id="di2" style="display: none;">
  Какой-то текст
  <button onclick="next2_3();">Следующий</button>
</div>

Пример функции что использовал:

  function next1_2() {
    if (document.getElementById('di1').style.display == 'block') {
        document.getElementById('di1').style.display = 'none';
        document.getElementById('di2').style.display = 'block';
      }
}

Возможно ли сделать через цикл чтобы не писать по каждому вопросу дополнительную функцию

Answer 1

function nextBlock(ev) {
  const el = ev.target.parentNode;
  const index = el.getAttribute('id').replace(/^di/, '');

  const nextIndex = +index + 1;
  const nextEl = document.getElementById(`di${nextIndex}`) || document.getElementById(`di1`);
  
  el.style.display = 'none';
  nextEl.style.display = 'block';
}

<div id="di1" style="display: block;">
  Какой-то текст1
  <button onclick="nextBlock(event)">Следующий</button>
</div>
<div id="di2" style="display: none;">
  Какой-то текст2
  <button onclick="nextBlock(event)">Следующий</button>
</div>
<div id="di3" style="display: none;">
  Какой-то текст3
  <button onclick="nextBlock(event)">Следующий</button>
</div>
<div id="di4" style="display: none;">
  Какой-то текст4
  <button onclick="nextBlock(event)">Следующий</button>
</div>
<div id="di5" style="display: none;">
  Какой-то текст5
  <button onclick="nextBlock(event)">Следующий</button>
</div>

Answer 2

Я бы работал с классом, так удобнее, чем напрямую со свойствами

<style>
    .hide {
        display: none;
    }
</style>
<div class="item">
    Какой-то текст1
    <button>Следующий</button>
</div>
<div class="item hide">
    Какой-то текст2
    <button>Следующий</button>
</div>
<div class="item hide">
    Какой-то текст3
    <button>Следующий</button>
</div>
<div class="item hide">
    Какой-то текст4
    <button>Следующий</button>
</div>
<div class="item hide">
    Какой-то текст5
    <button>Следующий</button>
</div>
<div class="item hide">
    Какой-то текст6
    <button>Следующий</button>
</div>

JS

const items = [...document.querySelectorAll('.item')];
const btns = [...document.querySelectorAll('.item button')];

function nextItem(idx){
  items.forEach(item => item.classList.add('hide'));
  items[idx+1].classList.remove('hide');
}

btns.forEach((btn, index) => {
  btn.addEventListener('click', e => {
    index = (index == items.length-1) ? -1 : index;
    nextItem(index);
  });
});

Answer 3

Как вариант, можно делать так:

const blocks = document.querySelectorAll('.block');
const buttons = document.querySelectorAll('.block button');

buttons.forEach((button, index) => {
  button.addEventListener('click', event => handleClick(event, index))
})

function handleClick (event, index) {
  if (index === buttons.length - 1) return;
  blocks[index].classList.add('hidden')
  blocks[index + 1].classList.remove('hidden')
}

.block.hidden { display: none; }

<div class="block">
  Какой-то текст, совсем небольшой 1
  <button>Следующий</button>
</div>
<div class="block hidden">
  Какой-то текст, совсем небольшой 2
  <button>Следующий</button>
</div>
<div class="block hidden">
  Какой-то текст, совсем небольшой 3
  <button>Следующий</button>
</div>
<div class="block hidden">
  Какой-то текст, совсем небольшой 4
  <button>Следующий</button>
</div>
<div class="block hidden">
  Какой-то текст, совсем небольшой 5
  <button>Следующий</button>
</div>
<div class="block hidden">
  Какой-то текст, совсем небольшой 6
  <button>Следующий</button>
</div>

БЛОГ НА HUSL

Смена блоков html при помощи цикла JS

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