0

Почему текст при нажатии кнопок не показывается?

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

questionBtn.forEach((element => {
  element.addEventListener("click", () => {
    element.classList.toggle("question__btn--active")
    element.querySelector(".answer__text").style.display = "block"
  });
}))
.answer__text {
  display:none;
}
 <div class="question">
     <p class="question__text">Кто ты?</p>
     <button class="question__btn">button</button>
 </div>
     <p class="answer__text">Who are you?</p>

8
  • Возможно дубликат вопроса: Проблема с показом текста при нажатии кнопок
    – Simon
    Commented 4 окт. 2022 в 10:36
  • Судя по предыдущему вопросу answer__text лежит не внутри question__btn, потому вот здесь element.querySelector(".answer__text") элемент и не находит.
    – Simon
    Commented 4 окт. 2022 в 10:38
  • во первых лучше использовать делегирование событий вместо порождения множества слушателей во-вторых ответ не возможно дать пока Вы не добавите в вопрос Вашу разметку. Commented 4 окт. 2022 в 10:39
  • Добавил разметку
    – user512592
    Commented 4 окт. 2022 в 11:04
  • @user512592 как я и писал, так как answer__text не находится внутри элемента question__btn вот это element.querySelector(".answer__text").style.display = "block" работать не будет, так как Вы ищете элемент с классом answer__text внутри question__btn.
    – Simon
    Commented 4 окт. 2022 в 11:51

1 ответ 1

1

Так как в вопрос добавилась разметка, я решил дополнить свой ответ.

Обновление

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

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

questionBtn.forEach((element => {
  element.addEventListener("click", () => {
    element.classList.toggle("question__btn--active")
    const p = element.parentNode.nextElementSibling
    const isBlock = p.style.display === "block"
    p.style.display = isBlock ? "none" : "block" 
  });
}))
.answer__text {
  display:none;
  font-weight: bold;
}

.question__btn--active{
  color: green;
  font-weight: bold;
}
<div class="question">
   <p class="question__text">Кто ты?</p>
   <button class="question__btn">button</button>
</div>
   <p class="answer__text">Who are you?</p>
   
<div class="question">
   <p class="question__text">Как тебя зовут?</p>
   <button class="question__btn">button</button>
</div>
   <p class="answer__text">What is you name?</p>   

Предыдущий ответ

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

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

    const questionBtn = document.querySelectorAll(".question__btn")
    questionBtn.forEach((element => {
      element.addEventListener("click", () => {
        element.classList.toggle("question__btn--active")
        element.querySelector(".answer__text").style.display = "block"
      });
    }))
.answer__text{  display: none; font-weight: bold;}
.question__btn{ background: white; }
.question__btn--active{ background: lightgreen; }
   <button class="question__btn">
      <p>Я знаю это</p>
      <p class="answer__text">I know it</p>
   </button>
   <button class="question__btn">
      <p>Я люблю читать книги</p>
      <p class="answer__text">I like read books</p>
   </button>
   <button class="question__btn">
      <p>А что любишь ты?</p>
      <p class="answer__text">What do you like?</p>
   </button>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.