HTML/CSS/JS: «Показать» Ответ на кнопке Нажмите ⇐ Html

[Anonymous]

Я создаю викторину для своей веб -страницы. В настоящее время у меня есть функция, работая над первым вопросом. Где кнопка скажет «Показать решение». После нажатия он покажет элемент. В настоящее время кнопка не изменяет текст кнопки, чтобы «скрыть решение» после того, как она отображается. < /P> Основная проблема заключается в том, что у меня есть несколько вопросов. И когда я нажимаю на Show Solution, он покажет первый вопрос.
Я знаю, что функция связана с этой функцией, но я не хочу копировать функцию несколько раз и менять идентификаторы на ответ1, ответ2 и т. Д. class = "Snippet">

Код: Выделить всё

         function show_hide()
{
var myAnswer = document.getElementById('answer');

var displaySetting = myAnswer.style.display;

var quizButton = document.getElementsByClassName('quiz-button');

if(displaySetting=="inline-block"){
myAnswer.style.display = 'none';

quizButton.innerHTML = 'Show Answer';
}
else
{
myAnswer.style.display = 'inline-block';
quizButton.innerHTML = 'Hide Answer';
}
}< /code>
.quiz-question{
margin-bottom: 10px;
text-align: left;
font-size: 15px;
color: #f44336;
font-weight: 400;
}
.quiz-button{
display: inline-block;
text-decoration: none;
color: #111;
border: 1px solid #f44336;
padding: 5px 5px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.quiz-button:hover{
color: #fff;
background: #f44336;
transition: 0.5s;
}
#answer{
display: none;
}< /code>

Chapter 1.1 End of Topic Quiz

The following quiz is meant to reinforce your understanding of the material presented above.


[h4]1. What is a statement? [/h4]
Show Solution

A statement[/b] is an instruction in a computer program that tells the computer to perform an action.[b]





[h4]2. What is a function? [/h4]
Show Solution

A function[/b] is several statements that are executed sequentially.

Подробнее здесь: https://stackoverflow.com/questions/709 ... tton-press