実現したいこと
最後に得点計算をするときに選択されている物の点数を計算したい
選択できるのを一つだけにしたい
前提
JSとHTMLでアンケート形式の診断ツールを作っています。
クリックした瞬間に得点が計算されているので回答を変更したいときに対処できないので、どうすればいいでしょうか
教えていただきたいです。
宜しくお願いします!
発生している問題
・複数選択できてしまう
・クリックした瞬間に得点が計算されているので回答を変更したいときに対処できない
・一つだけ選択できるようにしたい
試したこと
Disabledを使って複数選択できないようにしたが自分の技量が足りず選択肢を変更できなかったので断念
該当のソースコード
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 <radio id="button1a" value="a" name="Q" >当てはまる 8 <radio id="button1b" value="b" name="Q" >少し当てはまる 9 <radio id="button1c" value="c" name="Q" >少し当てはまらない 10 <radio id="button1d" value="d" 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.log("4point") 21 console.log(scorea+scoreb) 22 } 23 function answerQuiz1b() { 24 document.getElementById('button1b').disabled = true; 25 scorea++;scorea++;scorea++; 26 console.log("3point") 27 console.log(scorea+scoreb) 28 } 29 function answerQuiz1c() { 30 document.getElementById('button1c').disabled = true; 31 scorea++;scorea++; 32 console.log("2point") 33 console.log(scorea+scoreb) 34 } 35 function answerQuiz1d() { 36 document.getElementById('button1d').disabled = true; 37 scorea++; 38 console.log("1point") 39 console.log(scorea+scoreb) 40}}
回答2件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。