Как сделать появление текста при нажатии на кнопку Java Script, HTML?

Question

Подскажите, пожалуйста, как сделать появление текста при нажатии на кнопку. У пользователя есть несколько вариантов ответа, каждый из них написан на кнопке. Когда он выбирает ответ, то появляется специальный текст для этого варианта, кнопки исчезают, старый(основной) текст и текст, который появился после нажатия, остаются на месте. Я хочу сделать текстовый квест. Я пыталась сделать это таким способом(код ниже), текст 1 выводится, но исчезает все остальное на странице. Подскажите, пожалуйста, каким способом можно реализовать мою задумку.

Java Script и HTML

<input value = "выбрать 1 вариант" onclick="document.write(text1)" type = "button">

<script>
var text1 = "текст 1";
</script>

Answer 1

Если вы спрашиваете каким образом реализовать задумку, то можно использовать jQuery.

Устанавливаете display: none - для текста который хотите изначально скрыть. Потом обрабатываете клик по кнопке и добавляете класс show. который содержит display: block. Если вы не хотите переключать класс вы можете добавить класс один раз использовав addClass

$(".btn").click(function(){
    $(".option").toggle('show')
})

.option {
  display: none;
}

.show {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="btn">Button</button>
<div class="option">Options text</div>

БЛОГ НА HUSL

Как сделать появление текста при нажатии на кнопку Java Script, HTML?

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