JS最後にクリックした回答だけが選択されるようにしたい、別の回答を選択したときに点数を変動させたい

Question

実現したいこと

最後に得点計算をするときに選択されている物の点数を計算したい
選択できるのを一つだけにしたい

前提

JSとHTMLでアンケート形式の診断ツールを作っています。
クリックした瞬間に得点が計算されているので回答を変更したいときに対処できないので、どうすればいいでしょうか
教えていただきたいです。
宜しくお願いします！

発生している問題

・複数選択できてしまう
・クリックした瞬間に得点が計算されているので回答を変更したいときに対処できない
・一つだけ選択できるようにしたい

試したこと

Disabledを使って複数選択できないようにしたが自分の技量が足りず選択肢を変更できなかったので断念

該当のソースコード

<div class="quiz">
    <div class="quiz-container">
    <div class="Question">
      <p>質問</p>
    </div>
      <form id="quiz-1">
        <radio  id="button1a" value="a" name="Q" >当てはまる
        <radio  id="button1b" value="b" name="Q" >少し当てはまる
        <radio  id="button1c" value="c" name="Q" >少し当てはまらない
        <radio  id="button1d" value="d" name="Q" >当てはまらない
      </form>
    </div>

//回答表示
<div id="score-container">
  <p id="score-message"></p>
</div>
<button class="btn-score" type="button" onclick="showScore();">合計得点を見る</button>
</div>

</body>

//回答表示
 function showScore(){
  const totalScore = document.getElementById('score-message');
    
  if(scoreb > 85) {
    totalScore.innerHTML = "テスト結果は" + (scorea+scoreb) + "点でした、高ストレス者の可能性があります";
  } 
  else if(scorea > 45) { 
     totalScore.innerHTML = "テスト結果は" + (scorea+scoreb) + "点でした、高ストレス者の可能性があります";
  } 
  else {
    totalScore.innerHTML = "テスト結果は" + (scorea+scoreb) + "点でした、高ストレス者の可能性はありません";
  }   
}

//質問1
{ function answerQuiz1a() {
  document.getElementById('button1a').disabled = true;
  scorea++;scorea++;scorea++;scorea++;
  console.log("4point")
  console.log(scorea+scoreb)
 }
 function answerQuiz1b() {
  document.getElementById('button1b').disabled = true;
  scorea++;scorea++;scorea++;
  console.log("3point")
  console.log(scorea+scoreb)
 }
 function answerQuiz1c() {
  document.getElementById('button1c').disabled = true;
  scorea++;scorea++;
  console.log("2point")
  console.log(scorea+scoreb)
 }
 function answerQuiz1d() {
  document.getElementById('button1d').disabled = true;
  scorea++;
  console.log("1point")
  console.log(scorea+scoreb)
}}

Answer 1

radio ボタンに、同一のname属性を設定してください。
そうすることで、同一の radio ボタンの選択肢となり、複数選べなくなります。

計算に関しては、毎回０クリアしてから、全radio ボタンの値を取得して、合計を計算するように変更されるのをお勧めします。
単一のメソッドで、if か switch で選択肢毎の値を加算するか、ポイントが value に設定されているのですから、それを加算すればよいかと。

Answer 2

・複数選択できてしまう

<input type="radio"> に name 属性を付けましょう。4つのラジオボタンに同一のname属性を付けます。

・クリックした瞬間に得点が計算されているので回答を変更したいときに対処できない

ラジオボタンをクリックしたときは何もしないで(onclick属性を削除)、showScore() の中で選択されているラジオボタンの value 属性値から計算しましょう。document.forms['quiz-1'].ラジオボタンname属性値.value で値が取れます。

Comments

[tamago_kun]

'<input type="radio">'じゃなくて'<input type="button">'にしたいんですけどどうすればいいですか？

[int32_t]

<label><input type=radio>当てはまる</label> のようにしてCSSで見た目をボタンのようにすればよいでしょう。

[int32_t]

そもそもボタンには「選択状態」のようなものがないので、選択肢として使うのは難しいです。

[tamago_kun]

ボタンとラジオボタンがどっちも出てしまっているんですけど、どうすればよいですか？

[tamago_kun]

<label><input type=radio></label>
<button class="radio" id="button1a" value="a" name="Q">当てはまる

[tamago_kun]

このような形にしてみました

[int32_t]

<button> や <input type=button> は選択肢に使わないでください。
これ以上続けるようなら、別の質問をたてましょう。この質問の元の問題とは関係がないので。