最近javascriptを学習し始めた初心者です。
ラジオボタンから値を取得し、その点数によって違う診断結果を表示したいのですが、どのようにjavascriptを書いたらよいのかわかりません。
学習の参考にしたいので、教えていただきたいです。

<p style="text-align: center;">Q1.あなたの平均睡眠時間は？ <br>
    <input type = "radio" name = "sleeptime" value = "1">6時間未満
    <input type = "radio" name = "sleeptime" value = "2">6~7時間
    <input type = "radio" name = "sleeptime" value = "3">7~8時間
    <input type = "radio" name = "sleeptime" value = "4">8時間以上
</p>
<br>

<p style="text-align: center;">Q2.朝食はどのくらいの頻度で食べますか？ <br>
    <input type = "radio" name = "eatbreakfast" value = "1">毎日食べない
    <input type = "radio" name = "eatbreakfast" value = "2">時々食べる
    <input type = "radio" name = "eatbreakfast" value = "3">ほぼ食べる
    <input type = "radio" name = "eatbreakfast" value = "4">毎日食べる
</p>
<br>

<p style="text-align: center;">Q3.どのくらいの頻度で運動しますか？ <br>
    <input type = "radio" name = "sportsday" value = "1">週に1回程度
    <input type = "radio" name = "sportsday" value = "2">週に2~3回
    <input type = "radio" name = "sportsday" value = "3">週に4~5日
    <input type = "radio" name = "sportsday" value = "4">週に6回以上
</p>
<br>

<div class="center">
<button onclick="decision()" >判定</button>
<p id = "answer1"></p>

mugiyuki

2023/06/25 10:12

このようなアプリをつくってみたいと思って何とかHTMLまでは書いてみたのですが、javascriptの部分は調べてもよく解らないため質問しました。

行動規範の内容に同意します

回答2件

ベストアンサー

こんな感じで

javascript
1<script>
2const func_change =()=>{
3  const q1=document.querySelector('[name=sleeptime]:checked')?.value??null;
4  const q2=document.querySelector('[name=eatbreakfast]:checked')?.value??null;
5  const q3=document.querySelector('[name=sportsday]:checked')?.value??null;
6  judge.disabled=[q1,q2,q3].includes(null);
7}; 
8document.addEventListener('change',func_change);
9window.addEventListener('DOMContentLoaded', ()=>{
10  func_change();
11  judge.addEventListener('click',()=>{
12    const v1=Number(document.querySelector('[name=sleeptime]:checked').value);
13    const v2=Number(document.querySelector('[name=eatbreakfast]:checked').value);
14    const v3=Number(document.querySelector('[name=sportsday]:checked').value);
15    console.log([v1,v2,v3]);
16  });
17});
18</script>
19<p style="text-align: center;">Q1.あなたの平均睡眠時間は？ <br>
20    <label><input type = "radio" name = "sleeptime" value = "1">6時間未満</label>
21    <label><input type = "radio" name = "sleeptime" value = "2">6~7時間</label>
22    <label><input type = "radio" name = "sleeptime" value = "3">7~8時間</label>
23    <label><input type = "radio" name = "sleeptime" value = "4">8時間以上</label>
24</p>
25<br>
26
27<p style="text-align: center;">Q2.朝食はどのくらいの頻度で食べますか？ <br>
28    <label><input type = "radio" name = "eatbreakfast" value = "1">毎日食べない</label>
29    <label><input type = "radio" name = "eatbreakfast" value = "2">時々食べる</label>
30    <label><input type = "radio" name = "eatbreakfast" value = "3">ほぼ食べる</label>
31    <label><input type = "radio" name = "eatbreakfast" value = "4">毎日食べる</label>
32</p>
33<br>
34
35<p style="text-align: center;">Q3.どのくらいの頻度で運動しますか？ <br>
36    <label><input type = "radio" name = "sportsday" value = "1">週に1回程度</label>
37    <label><input type = "radio" name = "sportsday" value = "2">週に2~3回</label>
38    <label><input type = "radio" name = "sportsday" value = "3">週に4~5日</label>
39    <label><input type = "radio" name = "sportsday" value = "4">週に6回以上</label>
40</p>
41<br>
42
43<div class="center">
44<button id="judge">判定</button>
45<p id = "answer1"></p>

判定部分追加

javascript
1<script>
2const func_change =()=>{
3  const q1=document.querySelector('[name=sleeptime]:checked')?.value??null;
4  const q2=document.querySelector('[name=eatbreakfast]:checked')?.value??null;
5  const q3=document.querySelector('[name=sportsday]:checked')?.value??null;
6  judge.disabled=[q1,q2,q3].includes(null);
7}; 
8document.addEventListener('change',func_change);
9window.addEventListener('DOMContentLoaded', ()=>{
10  func_change();
11  judge.addEventListener('click',()=>{
12    const v1=Number(document.querySelector('[name=sleeptime]:checked').value);
13    const v2=Number(document.querySelector('[name=eatbreakfast]:checked').value);
14    const v3=Number(document.querySelector('[name=sportsday]:checked').value);
15    const total = v1 + v2+ v3;
16    let greeting = "超不健康。";
17    if(total>=  4) greeting = "普通。";
18    if(total>=  7) greeting = "健康。";
19    if(total>= 10) greeting = "超健康。";
20    answer1.textContent=greeting; 
21  });
22});
23</script>
24<fieldset style="text-align: center;">
25<legend>Q1.あなたの平均睡眠時間は？</legend>
26<label><input type = "radio" name = "sleeptime" value = "1">6時間未満</label>
27<label><input type = "radio" name = "sleeptime" value = "2">6~7時間</label>
28<label><input type = "radio" name = "sleeptime" value = "3">7~8時間</label>
29<label><input type = "radio" name = "sleeptime" value = "4">8時間以上</label>
30</fieldset>
31<fieldset style="text-align: center;">
32<legend>Q2.朝食はどのくらいの頻度で食べますか？</legend>
33<label><input type = "radio" name = "eatbreakfast" value = "1">毎日食べない</label>
34<label><input type = "radio" name = "eatbreakfast" value = "2">時々食べる</label>
35<label><input type = "radio" name = "eatbreakfast" value = "3">ほぼ食べる</label>
36<label><input type = "radio" name = "eatbreakfast" value = "4">毎日食べる</label>
37</fieldset>
38<fieldset style="text-align: center;">
39<legend>Q3.どのくらいの頻度で運動しますか？ </legend>
40<label><input type = "radio" name = "sportsday" value = "1">週に1回程度</label>
41<label><input type = "radio" name = "sportsday" value = "2">週に2~3回</label>
42<label><input type = "radio" name = "sportsday" value = "3">週に4~5日</label>
43<label><input type = "radio" name = "sportsday" value = "4">週に6回以上</label>
44</fieldset>
45<div align = "center">
46<button id="judge" style="width:100px; height:30px;">判定</button>
47<p id = "answer1"></p>
48</div>

投稿2023/06/26 00:27

編集2023/06/26 06:21

yambejp

総合スコア117615

mugiyuki

2023/06/26 06:02

ご教授いただいてありがとうございました。下記の様にしたのですがこんな感じでよいのでしょうか？あと、"value??null"の"??"の意味が解らないのですがどのような意味なのでしょうか？超初心者の質問で申し訳ありません。 <script> const func_change =()=>{ const q1=document.querySelector('[name=sleeptime]:checked')?.value??null; const q2=document.querySelector('[name=eatbreakfast]:checked')?.value??null; const q3=document.querySelector('[name=sportsday]:checked')?.value??null; judge.disabled=[q1,q2,q3].includes(null); }; document.addEventListener('change',func_change); window.addEventListener('DOMContentLoaded', ()=>{ func_change(); judge.addEventListener('click',()=>{ const v1=Number(document.querySelector('[name=sleeptime]:checked').value); const v2=Number(document.querySelector('[name=eatbreakfast]:checked').value); const v3=Number(document.querySelector('[name=sportsday]:checked').value); const total = (v1 + v2+ v3); if ( total >= 4 && total <= 6 ){ greeting = "普通。"; } else if ( total >= 7 && total <= 9 ){ greeting = "健康。"; } else if ( total >= 10 && total <= 12 ){ greeting = "超健康。"; } else { greeting = "超不健康。"; } document.getElementById("answer1").innerHTML = greeting; console.log(total); }); }); </script> <p style="text-align: center;">Q1.あなたの平均睡眠時間は？ <br> <label><input type = "radio" name = "sleeptime" value = "1">6時間未満</label> <label><input type = "radio" name = "sleeptime" value = "2">6~7時間</label> <label><input type = "radio" name = "sleeptime" value = "3">7~8時間</label> <label><input type = "radio" name = "sleeptime" value = "4">8時間以上</label> </p> <br> <p style="text-align: center;">Q2.朝食はどのくらいの頻度で食べますか？ <br> <label><input type = "radio" name = "eatbreakfast" value = "1">毎日食べない</label> <label><input type = "radio" name = "eatbreakfast" value = "2">時々食べる</label> <label><input type = "radio" name = "eatbreakfast" value = "3">ほぼ食べる</label> <label><input type = "radio" name = "eatbreakfast" value = "4">毎日食べる</label> </p> <br> <p style="text-align: center;">Q3.どのくらいの頻度で運動しますか？ <br> <label><input type = "radio" name = "sportsday" value = "1">週に1回程度</label> <label><input type = "radio" name = "sportsday" value = "2">週に2~3回</label> <label><input type = "radio" name = "sportsday" value = "3">週に4~5日</label> <label><input type = "radio" name = "sportsday" value = "4">週に6回以上</label> </p> <br> <div align = "center"> <button id="judge" style="width:100px; height:30px;">判定</button> <p id = "answer1"></p> </div>

yambejp

2023/06/26 06:26

querySelector(・・・)?.value??null については querySelector(・・・)?.valueでDOMが掴めた場合はそのvalueを受け取るそうでないとundefined ??nullはundefindやnullだったときはnullそうでないときは元の値を返します

mugiyuki

2023/06/26 08:33

ありがとうございます！何となく理解できました。もう少し手を加えてみたいと思います。

行動規範の内容に同意します

この回答はGPT-4による自動生成回答です

以下のようにJavaScriptを書くことで、ラジオボタンの値を取得し、診断結果を表示できます。

javascript
1function decision() {
2  const sleeptime = document.querySelector('input[name="sleeptime"]:checked').value;
3  const eatbreakfast = document.querySelector('input[name="eatbreakfast"]:checked').value;
4  const sportsday = document.querySelector('input[name="sportsday"]:checked').value;
5
6  const totalScore = parseInt(sleeptime) + parseInt(eatbreakfast) + parseInt(sportsday);
7  let result = '';
8
9  if (totalScore <= 4) {
10    result = '診断結果A';
11  } else if (totalScore <= 8) {
12    result = '診断結果B';
13  } else if (totalScore <= 12) {
14    result = '診断結果C';
15  } else {
16    result = '診断結果D';
17  }
18
19  document.getElementById('answer1').innerText = result;
20}