Проблема с показом текста при нажатии кнопок

Question

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

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>

Answer 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>

БЛОГ НА HUSL

Проблема с показом текста при нажатии кнопок

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