Переключение между блоками по клику

Question

Есть 6 одинаковых блоков, на которых пользователь отвечает на вопрос. Как сделать, чтобы по клику на кнопку далее открывался следующий блок?

let boxes = document.querySelectorAll('.boxes');
let btn = document.querySelector('.btn');
btn.addEventListener('click',function(){
});
boxes.forEach((e,idx)=>{
e[idx].classList.add('show');})

Answer 1

Можете попробовать добавлять классы с помощью глобальной переменной.

let boxes = document.querySelectorAll('.boxes'),
btn = document.querySelector('.btn');

let i = 0;

function showPlease() {
  if (i !== 0) {
    boxes[i-1].classList.remove('show');
  }
  
  boxes[i].classList.add('show');
  i++;
}

btn.addEventListener('click', showPlease, false);

Answer 2

let boxes = document.querySelectorAll('.boxes');
let btn = document.querySelectorAll('.btn');
btn.forEach(el => {
  el.addEventListener("click", function() {
  this.parentElement.nextElementSibling.classList.add("show")
})
})

  .boxes {
    display: none;
    width: 200px;
    height: 200px;
    background-color: hotpink;
  }
  .show {
    display: block;
  }

    <div class = "boxes show">
      <button class = "btn">Click me</button>
    </div>
    <div class = "boxes">
      <button class = "btn">Click me</button>
    </div>
    <div class = "boxes">
      <button class = "btn">Click me</button>
    </div>
    <div class = "boxes">
      <button class = "btn">Click me</button>
    </div>

Думаю вот так

Answer 3

вот смотри:

let boxes = document.querySelectorAll(".boxes");
let btn = document.getElementById("btn");

const showPlease = () => {
  let i = 0;
  return () => {
    if (i !== 0 && i !== boxes.length) boxes[i - 1].classList.remove('show'); // если нужно чтобы последний блок тоже скрывался то условие `i !== boxes.length` нужно убрать
     boxes[i].classList.add('show'); 
    i++;
  }
}

btn.addEventListener('click', showPlease())

Работает.

Вот песочница Jsfiddle

БЛОГ НА HUSL

Переключение между блоками по клику

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