Не работает querySelectorAll на второй константе

Question

const btn = document.querySelectorAll(".btn");
const content = document.querySelectorAll(".content--visible");
btn.forEach(btn => {
   btn.addEventListener("click", () => {
      if (content.classList.contains("content--hidden")) {
         btn.textContent = "Скрыть";
      } else {
         btn.textContent = "Показать ещё";
      }

      content.classList.toggle("content--hidden");
   });
});

выбивает ошибку: TypeError: content.classList is undefined

вот рабочий вариант без querySelectorAll:

const btn = document.querySelectorAll(".btn");
const content = document.querySelector(".content--visible");
btn.forEach(btn => {
  btn.addEventListener("click", () => {
    if (content.classList.contains("content--hidden")) {
      btn.textContent = "Скрыть";
    } else {
      btn.textContent = "Показать ещё";
    }

    content.classList.toggle("content--hidden");
  });
})

.content--hidden {
  display: none;
}

.wrapper {
  display: flex;
  justify-content: space-around;
}

.wrapper>div {
  width: 300px;
}

<button class="btn" type="button">
    Показать элемент
</button>
<div class="wrapper">
  <div class="1 content--visible content--hidden">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae, natus? Nostrum distinctio itaque ex! Pariatur eligendi error ab. Reiciendis ipsum deserunt magni vel veniam porro doloremque iure fuga voluptatem commodi!

  </div>
  <div class="2 content--visible content--hidden">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae, natus? Nostrum distinctio itaque ex! Pariatur eligendi error ab. Reiciendis ipsum deserunt magni vel veniam porro doloremque iure fuga voluptatem commodi!

  </div>
</div>

но мне нужно чтобы работало со всеми классами

Answer 1

content - массив, для применения данных к каждому элементу массива надо применять цикл

Answer 2

const buttons = document.querySelectorAll(".btn");
const content = document.querySelectorAll(".content--visible");

buttons.forEach(btn => {
  btn.addEventListener("click", () => {
    content.forEach((item) => toggleContent(item, btn))
  });
});

function toggleContent(item, btn) {
  if (item.classList.contains("content--hidden")) {
    btn.textContent = "Скрыть";
  } else {
    btn.textContent = "Показать ещё";
  }

  item.classList.toggle("content--hidden");
}

TypeError: content.classList is undefined потому что вы пытаетесь обратиться к массиву, а не конкретному элементу.

Для того чтобы обратиться к каждому элементу пройдитесь по нему в цикле, например через forEach

А если по вашей задумке в content должен быть 1 элемент, а не массив, тогда стоит заменить:

document.querySelectorAll(".content--visible")
на
document.querySelector(".content--visible")

БЛОГ НА HUSL

Не работает querySelectorAll на второй константе

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