0

 <div class="question">
     <p class="question__text"></p>
     <button class="question__btn"></button>
 </div>
     <p class="answer__text"></p>

Мне нужно чтобы при нажатии кнопок появлялся текст с ответом для каждой. У меня при нажатии любой из кнопок открывается только текст первой. Как исправить это?

   .answer__text {
      display: none;
    }

const questionBtn = document.querySelectorAll(".question__btn")

questionBtn.forEach((element => {
  element.addEventListener("click", () => {
    element.classList.toggle("question__btn--active")
    document.querySelector(".answer__text").style.display = "block"


  });
}))

6
  • document.querySelector(".answer__text").style.display = "block" находит первый элемент считая с документа, вот и находит каждый раз один и тот же. Если например этот текст у вас в каждой кнопке используйте element.querySelector(".answer__text").style.display = "block"
    – eccs0103
    3 окт 2022 в 14:39
  • Или как у вас там устроено
    – eccs0103
    3 окт 2022 в 14:39
  • А вообще на заметку: есть такой прекрасный аттрибут - hidden. Хотите скрыть элемент - element.hidden = true; хотите показать element.hidden = false; и не надо style лишний раз трогать
    – eccs0103
    3 окт 2022 в 14:41
  • К сожалению, не помогло. Теперь вообще не открывается текст при нажатии.
    – user512592
    3 окт 2022 в 15:15
  • Покажите вашу html конструкцию
    – eccs0103
    3 окт 2022 в 15:20

1 ответ 1

0

Конструкция

По описанию вам нужно генерировать для каждого вопроса отдельный блок, со своим вопросом, ответом и кнопкой который откроет этот ответ. Мне кажется вам надо такая конструкция:

<body>
  <template id="question-block">
    <div class="question">
      <p class="question__text"></p>
      <button class="question__btn"></button>
    </div>
    <p class="answer__text" hidden></p>
  </template>
</body>

Решение

function generateQuestionBlock(question, answer) {
  const templateQuestionBlock = document.querySelector(`template#question-block`);
  const divQuestionCloneFragment = templateQuestionBlock.content.cloneNode(true);
  divQuestionCloneFragment.querySelector(`p.question__text`).innerText = question;

  const divAnswerText = divQuestionCloneFragment.querySelector(`p.answer__text`);
  divQuestionCloneFragment.querySelector(`button.question__btn`).addEventListener(`click`, (event) => {
    divAnswerText.hidden = false;
  });
  divAnswerText.innerText = answer;
  document.body.appendChild(divQuestionCloneFragment);
}

generateQuestionBlock(`Как вам мой ответ?`, `Ясно`);
generateQuestionBlock(`У вас оствлтсь вопросы?`, `Надеюсь что нет`);
<body>
  <template id="question-block">
    <div class="question">
      <p class="question__text"></p>
      <button class="question__btn">Показать ответ</button>
    </div>
    <p class="answer__text" hidden></p>
  </template>
</body>

2
  • Спасибо за ответ. Просто у меня уже готовы блоки и их не нужно клонировать и создавать такую сложную конструкцию. Мне нужно просто чтобы при нажатии любой из кнопок открывался скрытый текст. Почему-то когда document.querySelector меняешь на element.querySelector перестает работать работать код.
    – user512592
    3 окт 2022 в 16:48
  • @user512592 element - это кнопка. Так будет работать, если у вас ответы в кнопках. Попробуйте вместо element.hidden = false это - element.closest('p.answer__text').hidden = false
    – eccs0103
    3 окт 2022 в 16:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.