![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今回はJavaScriptで診断テストをつくるッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
診断テスト~?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今日は【陰キャ・陽キャ診断テスト】をつくってみるッピよ~
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_困.png)
なんかビミョーなテストだなぁ~
- <p>タグでの問題文のつくりかた
- <input>タグでのラジオボタンのつくりかた
- JavaScriptでの判定プログラムのつくりかた
サンプル診断テスト
ボタンを押してください
完成コード見本
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<script>
<!-- ↓②ここに判定プログラムを書こう!↓ -->
function answer(){
let Q= document.getElementById( "Q" );
let A = Number(Q.q1.value) + Number(Q.q2.value) + Number(Q.q3.value) + Number(Q.q4.value);
if (A >= 9) {
text = "あなたは陽キャです。"
}else if(A >= 4 && A <= 8){
text = "あなたはふつうです。";
}else{
text = "あなたは陰キャです。";
}
document.getElementById("kotae").innerHTML = text;
}
</script>
<!-- ↓①この下に問題文を入力してね!↓ -->
<h1>性格診断</h1>
<form id="Q">
<p>甘いものが好き?<br>
<input name="q1" type="radio" value="3"> 好き
<input name="q1" type="radio" value="2"> 普通
<input name="q1" type="radio" value="1"> 嫌い
</p>
<p>アウトドア派? インドア派?<br>
<input name="q2" type="radio" value="3"> アウトドア派
<input name="q2" type="radio" value="2"> どちらでもない
<input name="q2" type="radio" value="1"> インドア派
</p>
<p>旅行でみっちり計画建てるほう?<br>
<input name="q3" type="radio" value="3"> ぜんぜん
<input name="q3" type="radio" value="2"> どちらでもない
<input name="q3" type="radio" value="1"> みっちり
</p>
<p>ケンカしたらすぐあやまる?<br>
<input name="q4" type="radio" value="3"> ぜんぜん
<input name="q4" type="radio" value="2"> どちらでもない
<input name="q4" type="radio" value="1"> あやまる
</p>
</form>
<button onclick="answer();">性格診断!</button>
<div id="kotae">ボタンを押してください</div>
<!-- ここまで! -->
</body>
</html>
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今回はこのコードをわかりやすく!
じっくり解説していくッピよ~
性格診断テストをつくろう
必要なもの
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
![メモ帳](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-07-01_611.jpg)
- メモ帳
- ブラウザ
が必要ッピ!
元になるコード
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<script>
<!-- ②↓ここに判定プログラムを書こう!↓ -->
</script>
<!-- ①↓この下に【問題文】を入力してね!↓ -->
<!-- ここまで! -->
</body>
</html>
問題文をつくってみよう
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
準備ができたらさっそく【問題文】を作ってみるっぴ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まず<body><body>の間に
<h1>性格診断</h1>
<p>甘いものが好き?</p>
<p>アウトドア派? インドア派?</p>
<p>旅行でみっちり計画建てるほう?</p>
<p>ケンカしたらすぐあやまる?</p>
と入力するッピ!
![](https://janken.asotetu.work/wp-content/uploads/2021/12/2021-12-19_1_1.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
お、こんな感じかな?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
いい感じッピ!
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<script>
<!-- ↓②ここに判定プログラムを書こう!↓ -->
</script>
<!-- ↓①この下に問題文を入力してね!↓ -->
<h1>性格診断</h1>
<p>甘いものが好き?</p>
<p>アウトドア派? インドア派?</p>
<p>旅行でみっちり計画建てるほう?</p>
<p>ケンカしたらすぐあやまる?</p>
<!-- ここまで! -->
</body>
</html>
ラジオボタン(チェックボックス)をつくってみよう
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次はラジオボタン(チェックボタン)をつくってみるッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_無.png)
ラジオボタンってさっきのコレ?
この丸ポチみたいなやつ
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
そのとおりッピ!
これを使ってチェックリストを作っていくッピ!
fromタグでチェックリストをタグ付けする
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
チェックリストをつくるためには、
ここから先はユーザーの入れた情報を受信する
【from】タグで『問題文』囲ってあげる必要があるッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
さっきの問題文を
<form id="Q">
問題文
</from>
で囲ってみるッピよ~
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<script>
<!-- ↓②ここに判定プログラムを書こう!↓ -->
</script>
<!-- ↓①この下に問題文を入力してね!↓ -->
<h1>性格診断</h1>
<form id="Q">
<p>甘いものが好き?</p>
<p>アウトドア派? インドア派?</p>
<p>旅行でみっちり計画建てるほう?</p>
<p>ケンカしたらすぐあやまる?</p>
</form>
<!-- ここまで! -->
</body>
</html>
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
この
<from id=”Q“>って??
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
このid=”Q“は
「Qという名前のIDですよ」
という意味ッピね!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
idをつけることによって、あとで
「この住所のこの部分をカスタマイズして!」という
プログラミングが組みやすくなるッピよ~
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
なるほどな~
ラジオボタンをつくる
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次はラジオボタンを設置してみるッピ!
最初の【問題文】甘いものが好き? に
<p>甘いものが好き?<br>
<input name="q1" type="radio" value="3"> 好き
<input name="q1" type="radio" value="2"> 普通
<input name="q1" type="radio" value="1"> 嫌い
</p>
とボタンを付け加えていくッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
<from></from>のくくりでみるとこんな感じッピ!
<form id="Q">
<p>甘いものが好き?<br>
<input name="q1" type="radio" value="3"> 好き
<input name="q1" type="radio" value="2"> 普通
<input name="q1" type="radio" value="1"> 嫌い
</p>
<p>アウトドア派? インドア派?</p>
<p>旅行でみっちり計画建てるほう?</p>
<p>ケンカしたらすぐあやまる?</p>
</form>
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
うーんこんな感じかな?
![](https://janken.asotetu.work/wp-content/uploads/2021/12/2021-12-19_1_2.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
よくできてるッピ!
ユウキくん天才ッピ!!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
やったぜ♪
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<script>
<!-- ↓②ここに判定プログラムを書こう!↓ -->
</script>
<!-- ↓①この下に問題文を入力してね!↓ -->
<h1>性格診断</h1>
<form id="Q">
<p>甘いものが好き?<br>
<input name="q1" type="radio" value="3"> 好き
<input name="q1" type="radio" value="2"> 普通
<input name="q1" type="radio" value="1"> 嫌い
</p>
<p>アウトドア派? インドア派?</p>
<p>旅行でみっちり計画建てるほう?</p>
<p>ケンカしたらすぐあやまる?</p>
</form>
<!-- ここまで! -->
</body>
</html>
ラジオボタン解説
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
なあ、このラジオボタンの
<input name=”q1″ type=”radio” value=”3″>
とかって、どういう意味なんだ??
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_ため息.png)
たくさんあって意味がわからないよ・・・
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
それはッピね、
<input name=”q1“ type=”radio” value=”3“>
という意味ッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_困.png)
うーん
わかったようなわからないよーな・・・
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
とりあえずこの<input>は
情報を入力したり選択すると部分に取り付けるタグで、
type=”radio”は『ラジオボタン』を設定する命令文こと??
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
そのとおりッピ!
name=”q1“は<input>タグにおけるid
value=”3“はプログラミングにおける変数
になるッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
このvalueをしこむことで、
あとでプログラミングするとき、ここに設定した文字や数値を呼び出して
計算やコメントを変化させることができるッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_ため息.png)
むーなんだか難しいな・・・
この先が思いやられるよ
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
安心するッピ!
このうさタブがユウキくんにわかりやすく解説してみせるッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
たのむぜ、うさタブ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まかせるッピ!
この調子で、他の問題文にもラジオボタンを設置するッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
つづいて<body><body>に
<form id="Q">
<p>甘いものが好き?<br>
<input name="q1" type="radio" value="3"> 好き
<input name="q1" type="radio" value="2"> 普通
<input name="q1" type="radio" value="1"> 嫌い
</p>
<p>アウトドア派? インドア派?<br>
<input name="q2" type="radio" value="3"> アウトドア派
<input name="q2" type="radio" value="2"> どちらでもない
<input name="q2" type="radio" value="1"> インドア派
</p>
<p>旅行でみっちり計画建てるほう?<br>
<input name="q3" type="radio" value="3"> ぜんぜん
<input name="q3" type="radio" value="2"> どちらでもない
<input name="q3" type="radio" value="1"> みっちり
</p>
<p>ケンカしたらすぐあやまる?<br>
<input name="q4" type="radio" value="3"> ぜんぜん
<input name="q4" type="radio" value="2"> どちらでもない
<input name="q4" type="radio" value="1"> あやまる
</p>
</form>
と入力するッピよ~
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<script>
<!-- ↓②ここに判定プログラムを書こう!↓ -->
</script>
<!-- ↓①この下に問題文を入力してね!↓ -->
<h1>性格診断</h1>
<form id="Q">
<p>甘いものが好き?<br>
<input name="q1" type="radio" value="3"> 好き
<input name="q1" type="radio" value="2"> 普通
<input name="q1" type="radio" value="1"> 嫌い
</p>
<p>アウトドア派? インドア派?<br>
<input name="q2" type="radio" value="3"> アウトドア派
<input name="q2" type="radio" value="2"> どちらでもない
<input name="q2" type="radio" value="1"> インドア派
</p>
<p>旅行でみっちり計画建てるほう?<br>
<input name="q3" type="radio" value="3"> ぜんぜん
<input name="q3" type="radio" value="2"> どちらでもない
<input name="q3" type="radio" value="1"> みっちり
</p>
<p>ケンカしたらすぐあやまる?<br>
<input name="q4" type="radio" value="3"> ぜんぜん
<input name="q4" type="radio" value="2"> どちらでもない
<input name="q4" type="radio" value="1"> あやまる
</p>
</form>
<!-- ここまで! -->
</body>
</html>
![](https://janken.asotetu.work/wp-content/uploads/2021/12/2021-12-19_1_3.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
できた~
判定ボタンを設置する
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次は判定ボタンを設置するッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
お、楽しみだな~
<button>タグでボタンを作成する
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まずはボタンをつくるッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_無.png)
ボタンってコレ?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
そのとおりッピ!
さっそく問題文の下に判定ボタンを設置するッピよ~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
<button onclick="answer();">性格診断!</button>
<div id="kotae">ボタンを押してください</div>
と入力するッピ!
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<script>
<!-- ↓②ここに判定プログラムを書こう!↓ -->
</script>
<!-- ↓①この下に問題文を入力してね!↓ -->
<h1>性格診断</h1>
<form id="Q">
<p>甘いものが好き?<br>
<input name="q1" type="radio" value="3"> 好き
<input name="q1" type="radio" value="2"> 普通
<input name="q1" type="radio" value="1"> 嫌い
</p>
<p>アウトドア派? インドア派?<br>
<input name="q2" type="radio" value="3"> アウトドア派
<input name="q2" type="radio" value="2"> どちらでもない
<input name="q2" type="radio" value="1"> インドア派
</p>
<p>旅行でみっちり計画建てるほう?<br>
<input name="q3" type="radio" value="3"> ぜんぜん
<input name="q3" type="radio" value="2"> どちらでもない
<input name="q3" type="radio" value="1"> みっちり
</p>
<p>ケンカしたらすぐあやまる?<br>
<input name="q4" type="radio" value="3"> ぜんぜん
<input name="q4" type="radio" value="2"> どちらでもない
<input name="q4" type="radio" value="1"> あやまる
</p>
</form>
<button onclick="answer();">性格診断!</button>
<div id="kotae">ボタンを押してください</div>
<!-- ここまで! -->
</body>
</html>
![](https://janken.asotetu.work/wp-content/uploads/2021/12/2021-12-19_1_4.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
できた~!!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_汗.png)
・・・だけどコレ、
ボタンを押してもうんともすんとも言わないぞ?
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
どうなってるんだ、うさタブ?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
それはまだ【判定プログラム】を組み込んでいないからッピね
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これから性格判定プログラムを作って、
ボタンを押したら呼び出す仕組みをつくっていくッピよ~
判定プログラムを作成する
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ここから最後の解説に入るッピ!
一緒に性格診断プログラムをつくっていくッピね!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
そのためにはまずボタンを押したらプログラムが動作するように、
プログラムのセットをつくる必要があるッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
知ってるぜ!
プログラムを他の場所で呼び出すためには、function関数を設定するんだよな
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
さすがユウキくんッピ!
さっそくfunction関数を設定して行くッピ!
function関数を作成する
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
<script></script>の間に
function answer(){
//判定プログラムをここに組み込む
}
と入力するッピ!
この function anser{ }の中に、セットに組み込むプログラムを書いていくッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これにくわえて、前に書いたボタンプログラム
<button onclick="answer();">性格診断!</button>
と組み合わせるとプログラムを呼び出すことができるんだッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これは
<button onclick=”answer();“>性格診断!</button>
という意味になるッピよ~
if文を使って判定プログラムを書き出す
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ここは一気にプログラムを公開するッピ!
function answer(){ } の中に
function answer(){
let Q= document.getElementById( "Q" );
let A = Number(Q.q1.value) + Number(Q.q2.value) + Number(Q.q3.value) + Number(Q.q4.value);
if (A >= 9) {
text = "あなたは陽キャです。"
}else if(A >= 4 && A <= 8){
text = "あなたはふつうです。";
}else{
text = "あなたは陰キャです。";
}
document.getElementById("kotae").innerHTML = text;
}
と入力するッピ!
![](https://janken.asotetu.work/wp-content/uploads/2021/12/2021-12-19_1_5.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
このコードについて詳しく解説していくッピよ~
valueを使って入力した値を呼び出す
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
この診断テストは、
選択肢にあてられた数値の合計によって性格の診断ができる
というものッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_困.png)
っていわれても、わかんないなー
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_驚き_強.png)
あ、もしかして
<input name="q1" type="radio" value="3"> 好き
<input name="q1" type="radio" value="2"> 普通
<input name="q1" type="radio" value="1"> 嫌い
のこと?
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
この
< input name=”q1″ type=”radio” value=”3” >
valueの後ろにある数字の合計が性格診断テストに使われてるかんじ??
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
そのとおりッピ! ユウキくん天才ッピ!
この
< input name=”q1” type=”radio” value=”3″ >
name で、選択肢をグループ分けをして、
< input name=”q1″ type=”radio” value=”3” >
で、選択したvalueの値を集計して診断してるんだッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
なるほどね~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
だからこのプログラムを
< input name=”q1″ type=”radio” value=”3” >
で、JavaScriptで吸い出して計算する必要があるがあるんだッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
この
let Q= document.getElementById( "Q" );
let A = Number(Q.q1.value) + Number(Q.q2.value)....;
はラジオボタンの選択データを取得(吸い取る)プログラムになるッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これは
let Q= document.getElementById( “Q” );
let A = Number(Q.q1.value) + Number(Q.q2.value)….;
という意味ッピね~
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_無.png)
へ~
Number()で文字データを数値に変換する
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
なあうさタブ
この
Number(Q.q1.value)
って何?
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_困.png)
なんで文字列を数値に変換する必要があるんだ?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
それはッピね~
< input name=”q1″ type=”radio” value=”3” >
のvalueデータは、そのままだと【文字データ】だからッピ
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
つまり、このまま文字データだと【数値】として認識されないから
計算ができないんだッピよ~
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_驚.png)
そうなのか~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
もし文字データのままだと
1+1=2
ではなくて
1+1=>11
になってしまうッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
へー
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
話をもどすッピ!
このNumber()を使うことで
let A = Number(Q.q1.value) + Number(Q.q2.value) + Number(Q.q3.value) + Number(Q.q4.value);
で選択したラジオボタンの数値を集計して最後に診断結果を表示することができるんだッピよ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_無.png)
んーと、つまり
let A = Number(Q.q1.value) + Number(Q.q2.value) + Number(Q.q3.value) + Number(Q.q4.value);
・・・この変数Aが集計した結果の数字になるってことか!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ジャストライ! そのとおりッピ!
次はこの集計結果をもとに、診断結果をかえていく仕組みをつくっていくッピよ~
if文・>大なり・小なり<を使って範囲をしぼりこんでいく
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次はif文で診断結果をしぼりこんでいくッピよ~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
if (A >= 9) {
text = "あなたは陽キャです。";
}else if(A >= 4 && A <= 8){
text = "あなたはふつうです。";
}else{
text = "あなたは陰キャです。";
}
このプログラムで最後に診断結果を表示する変数textを変更するんだッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
if (A >= 9)
{ text = “あなたは陽キャです”; }
else if ( A >= 4 && A <= 8 )
{ text = “あなたはふつうです。”; }
else
{ text = “あなたは陰キャです。”; }
という意味ッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
つまり変数Aの数値が
9以上は「陽キャ」
8以下4以上なら 「ふつう」
それ以下の数値は「陰キャ」
になるってこと??
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
そのとおりッピ!
if (条件A && 条件B)
とすることで、複数の条件を当てはめて
結果をしぼりこむことができるんだッピよ~
getElementById(“住所ID”) でテキストを書き換える
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
最後はテキストの書き換えプログラムッピね!
document.getElementById("kotae").innerHTML = text;
で、いちばんうしろの文章を診断結果にかきかえることができるッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これは
document.getElementById(“kotae“).innerHTML = text;
という意味ッピよ~
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
できた~
![](https://janken.asotetu.work/wp-content/uploads/2021/12/2021-12-19_1_5.jpg)
全体のコードの確認
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<script>
<!-- ↓②ここに判定プログラムを書こう!↓ -->
function answer(){
let Q= document.getElementById( "Q" );
let A = Number(Q.q1.value) + Number(Q.q2.value) + Number(Q.q3.value) + Number(Q.q4.value);
if (A >= 9) {
text = "あなたは陽キャです。"
}else if(A >= 4 && A <= 8){
text = "あなたはふつうです。";
}else{
text = "あなたは陰キャです。";
}
document.getElementById("kotae").innerHTML = text;
}
</script>
<!-- ↓①この下に問題文を入力してね!↓ -->
<h1>性格診断</h1>
<form id="Q">
<p>甘いものが好き?<br>
<input name="q1" type="radio" value="3"> 好き
<input name="q1" type="radio" value="2"> 普通
<input name="q1" type="radio" value="1"> 嫌い
</p>
<p>アウトドア派? インドア派?<br>
<input name="q2" type="radio" value="3"> アウトドア派
<input name="q2" type="radio" value="2"> どちらでもない
<input name="q2" type="radio" value="1"> インドア派
</p>
<p>旅行でみっちり計画建てるほう?<br>
<input name="q3" type="radio" value="3"> ぜんぜん
<input name="q3" type="radio" value="2"> どちらでもない
<input name="q3" type="radio" value="1"> みっちり
</p>
<p>ケンカしたらすぐあやまる?<br>
<input name="q4" type="radio" value="3"> ぜんぜん
<input name="q4" type="radio" value="2"> どちらでもない
<input name="q4" type="radio" value="1"> あやまる
</p>
</form>
<button onclick="answer();">性格診断!</button>
<div id="kotae">ボタンを押してください</div>
<!-- ここまで! -->
</body>
</html>
- <from>で問題文をつくる
- <input type=”radio”>でラジオボタンをつくる
- <button onClick=”関数名”>で、判定ボタンをつくる
- 関数 funtcionでボタンを押すと呼び出すプログラムを作成する
- Nunber()で、取得した要素を数字に変換する
- if関数で判定プログラムを作成する
- document.getElementById(“住所”).innerHTML でテキストを書き換える
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
上手くできたッピか?
これからも色んなゲーム作りやプログラムの解説をしていくッピ!
次回も楽しみにしているッピよ~~!