JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<div id="start-message">
</div>
<div id="question"></div>
<button id="start-button" style="display:none;"> Start </button>
<button id="finish-button" style="display:none;"> Finish </button>
</form>
JavaScript
function QuizForm(){
this.startMessage = "Привет. ответишь на вопрос?";
this.question = "Это вопрос";
this.showStartMessage = true;
this.startMessageElement = document.getElementById("start-message");
this.startButtonElement = document.getElementById("start-button");
this.questionElement = document.getElementById("question");
this.finishButtonElement = document.getElementById("finish-button");
}
QuizForm.prototype = {
init:function(){
if(this.showStartMessage){
this.displayStartMessage();
this.initStartButton();
} else {
this.displayQuestion();
this.initFinishButton();
}
},
displayStartMessage(){
this.startMessageElement.innerHTML = this.startMessage;
},
initStartButton:function(){
this.startButtonElement.style.display = '';
var quiz = this;
var startMessage = this.startMessageElement;
this.startButtonElement.onclick = function(){
this.style.display = 'none';
startMessage.style.display = 'none';
quiz.displayQuestion();
quiz.initFinishButton();
return false;
}
},
displayQuestion:function(){
this.questionElement.innerHTML = this.question;
},
initFinishButton:function(){
this.finishButtonElement.style.display = '';
}
}
quiz = new QuizForm();
quiz.init();