##作った背景：分岐型の診断ページの説明用デモを作って欲しいと言われたのでJavaScriptで作りました
##①HTMLとCSS
※CSSは適当なので、気にしないでください。
HTML
<!DOCTYPE html>
<html>
<head>
<title>診断ページ</title>
<style type="text/css">
html{
font-size: 62.5%;
}
*{
margin: 0;
padding: 0;
}
p{
font-size: 2rem;
padding: 40px 0;
color: #333;
font-weight: bold;
}
body{
width: 100%;
height: 480px;
margin: 80px 0;
background-color: #e4f3f9;
}
div.content-area{
width: 600px;
margin: 0 auto;
text-align: center;
}
input.button{
font-size: 2.0rem;
height: 64px;
width: 240px;
background-color: #1f7a9e;
margin: 0 10px;
border-radius: 8px;
color: #fff;
font-weight: bold;
text-shadow: 0 0 7px #000;
}
div.course-name{
padding: 20px 0;
color: orange;
font-size: 4rem;
}
</style>
</head>
<body id="body">
<div class="content-area">
<div id="question-area">
<p id="question-text"></p>
<input class="button" type="button" name="button-yes" value="はい" onclick="clickYes()"><input class="button" type="button" name="button-no" value="いいえ" onclick="clickNo()">
</div>
<div id="answer-area">
<p id="answer-text">答え</p>
</div>
</div>
</body>
</html>
##②JavaScript
JavaScript
document.getElementById('answer-area').style.display = 'none';
let judgeNum = 0;
let judge = false;
let courseName = 'もう一度最初からやり直してください'
const questionTagObj = document.getElementById('question-text');
const questionList = [
{ question: '資格をすでに持っている'},
{ question: '経験５年以上'},
{ question: '経験３年以上'},
{ question: '経験したことがある'}
];
questionTagObj.innerText=questionList[0].question;
const courseList = [
{ course: 'プロコース' },
{ course: '上級者コース' },
{ course: '中級者コース' },
{ course: '初心者コース' }
]
function clickYes(){
judge = true;
judgeCourse(judgeNum);
console.log(courseName);
document.getElementById('body').style.backgroundColor = '#f9ecd6';
document.getElementById('question-area').style.display = 'none';
document.getElementById('answer-area').style.display = 'block';
document.getElementById('answer-text').innerHTML = '【あなたにおすすめのコース】<br><div class="course-name">' + courseName + '</div>';
};
function clickNo(){
judge = false;
judgeNum = judgeNum + 1;
if(judgeNum === 4){
clickYes();
}else{
nextQuestion(judgeNum);
}
};
function nextQuestion(num){
if(!judge){
questionTagObj.innerText = questionList[num].question;
}else{
clickYes();
}
}
function judgeCourse(num){
switch (num){
case 0:
courseName = courseList[0].course;
break;
case 1:
courseName = courseList[1].course;
break;
case 2:
courseName = courseList[2].course;
break;
case 3:
courseName = courseList[2].course;
break;
case 4:
courseName = courseList[3].course;
break;
}
};