Q&A
実現したいこと
最後に得点計算をするときに選択されている物の点数を計算したい
選択できるのを一つだけにしたい
要望
JSとHTMLでアンケート形式の診断ツールを作っています。
選択肢にHTMLで点数をつけていて回答ボタンを押したらjavascriptで全部計算させて、showScoreの部分で計算結果を表示させれるようにしたいです
教えていただきたいです、宜しくお願いします!
発生している問題
・点数計算ができない
・最後に回答ボタンを押したら選択されているものの点数を計算して合計点を出せるようにしたい
試したこと
・もともとはButtonを使っていたがRadioに変更
・選択肢に同一のNameをつけた
該当のソースコード
HTML
1<div class="quiz"> 2 <div class="quiz-container"> 3 <div class="Question"> 4 <p>質問</p> 5 </div> 6 <form id="quiz-1"> 7 <input type="radio" id="button1a" value="4" name="Q">当てはまる 8 <input type="radio" id="button1b" value="3" name="Q">少し当てはまる 9 <input type="radio" id="button1c" value="2" name="Q">少し当てはまらない 10 <input type="radio" id="button1d" value="1" name="Q">当てはまらない 11 </form> 12 </div> 13 14//回答表示 15<div id="score-container"> 16 <p id="score-message"></p> 17</div> 18<button class="btn-score" type="button" onclick="showScore();">合計得点を見る</button> 19</div> 20 21</body>
Javascript
1//回答表示 2 function showScore(){ 3 const totalScore = document.getElementById('score-message'); 4 5 if(scoreb > 85) { 6 totalScore.innerHTML = "テスト結果は" + (scorea+scoreb) + "点でした、高ストレス者の可能性があります"; 7 } 8 else if(scorea > 45) { 9 totalScore.innerHTML = "テスト結果は" + (scorea+scoreb) + "点でした、高ストレス者の可能性があります"; 10 } 11 else { 12 totalScore.innerHTML = "テスト結果は" + (scorea+scoreb) + "点でした、高ストレス者の可能性はありません"; 13 } 14} 15 16//質問1 17{ function answerQuiz1a() { 18 document.getElementById('button1a').disabled = true; 19 scorea++;scorea++;scorea++;scorea++; 20 //consoleの部分は普通の利用者は見れない 21 console.log("4point") 22 console.log(scorea+scoreb) 23 } 24 function answerQuiz1b() { 25 document.getElementById('button1b').disabled = true; 26 scorea++;scorea++;scorea++; 27 console.log("3point") 28 console.log(scorea+scoreb) 29 } 30 function answerQuiz1c() { 31 document.getElementById('button1c').disabled = true; 32 scorea++;scorea++; 33 console.log("2point") 34 console.log(scorea+scoreb) 35 } 36 function answerQuiz1d() { 37 document.getElementById('button1d').disabled = true; 38 scorea++; 39 console.log("1point") 40 console.log(scorea+scoreb) 41}}
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。