Так как в вопрос добавилась разметка, я решил дополнить свой ответ.
Обновление
В данном случае вам не нужен поиск, достаточно подняться до родителя и найти его следующего соседа, это и будет параграф. Так же я изменил немного логику, теперь текст можно не только показать но и скрыть.
Думаю остальное Вы доработаете сами как сочтете нужным.
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>
answer__text
лежит не внутриquestion__btn
, потому вот здесьelement.querySelector(".answer__text")
элемент и не находит.делегирование событий
вместо порождения множестваслушателей
во-вторых ответ не возможно дать пока Вы не добавите в вопрос Вашу разметку.answer__text
не находится внутри элементаquestion__btn
вот этоelement.querySelector(".answer__text").style.display = "block"
работать не будет, так как Вы ищете элемент с классомanswer__text
внутриquestion__btn
.