JS最後に回答するときに選択している回答の点数を全部加算させたい

Question

実現したいこと

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

要望

JSとHTMLでアンケート形式の診断ツールを作っています。
選択肢にHTMLで点数をつけていて回答ボタンを押したらjavascriptで全部計算させて、showScoreの部分で計算結果を表示させれるようにしたいです
教えていただきたいです、宜しくお願いします！

発生している問題

・点数計算ができない
・最後に回答ボタンを押したら選択されているものの点数を計算して合計点を出せるようにしたい

試したこと

・もともとはButtonを使っていたがRadioに変更
・選択肢に同一のNameをつけた

該当のソースコード

<div class="quiz">
    <div class="quiz-container">
    <div class="Question">
      <p>質問</p>
    </div>
      <form id="quiz-1">
        <input  type="radio" id="button1a" value="4" name="Q">当てはまる
        <input  type="radio" id="button1b" value="3" name="Q">少し当てはまる
        <input  type="radio" id="button1c" value="2" name="Q">少し当てはまらない
        <input  type="radio" id="button1d" value="1" 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の部分は普通の利用者は見れない
  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

以下は、ある程度ご提示いただいたコードの原型をとどめながら修正したコード案になります。

<div class="quiz">
  <div class="quiz-container">
    <div class="Question">
      <p>質問1</p>
    </div>
    <form id="quiz-1">
      <input type="radio" id="button1a" value="4" name="Q1">当てはまる
      <input type="radio" id="button1b" value="3" name="Q1">少し当てはまる
      <input type="radio" id="button1c" value="2" name="Q1">少し当てはまらない
      <input type="radio" id="button1d" value="1" name="Q1">当てはまらない
    </form>
    <div class="Question">
      <p>質問2</p>
    </div>
    <form id="quiz-2">
      <input type="radio" id="button2a" value="4" name="Q2">当てはまる
      <input type="radio" id="button2b" value="3" name="Q2">少し当てはまる
      <input type="radio" id="button2c" value="2" name="Q2">少し当てはまらない
      <input type="radio" id="button2d" value="1" name="Q2">当てはまらない
    </form>
  </div>

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

let score = 0;
const numberOfQuestions = 2; // 質問の数を変数として定義します。質問の数が増えた場合は、この値を更新してください。

function getSelectedValue(radioGroupName) {
  const radios = document.getElementsByName(radioGroupName);
  for (let i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      return parseInt(radios[i].value);
    }
  }
  return 0;
}

function showScore() {
  const totalScore = document.getElementById('score-message');
  
  score = 0;
  for (let i = 1; i <= numberOfQuestions; i++) {
    score += getSelectedValue(`Q${i}`);
  }

  if (score > 85) {
    totalScore.innerHTML = "テスト結果は" + score + "点でした、高ストレス者の可能性があります";
  } else if (score > 45) {
    totalScore.innerHTML = "テスト結果は" + score + "点でした、高ストレス者の可能性があります";
  } else {
    totalScore.innerHTML = "テスト結果は" + score + "点でした、高ストレス者の可能性はありません";
  }
}

numberOfQuestions を定義し、質問の数を格納しています。質問が増えた場合、この値を更新するだけで対応できます。また showScore 関数内で for ループを使用して、各質問の選択されたラジオボタンの値を合計してスコアを計算しています。

Answer 2

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  btn.addEventListener('click',()=>{
    document.querySelector('#score-message').textContent=[...document.querySelectorAll('.q:checked')].reduce((x,y)=>x+Number(y.value),0);
  });
});
</script>
<fieldset>
<legend>Q1</legend>
<label><input  type="radio" class="q" name="q1" value="4">4</label>
<label><input  type="radio" class="q" name="q1" value="3">3</label>
<label><input  type="radio" class="q" name="q1" value="2">2</label>
<label><input  type="radio" class="q" name="q1" value="1">1</label>
</fieldset>
<fieldset>
<legend>Q2</legend>
<label><input  type="radio" class="q" name="q2" value="4">4</label>
<label><input  type="radio" class="q" name="q2" value="3">3</label>
<label><input  type="radio" class="q" name="q2" value="2">2</label>
<label><input  type="radio" class="q" name="q2" value="1">1</label>
</fieldset>
<fieldset>
<legend>Q3</legend>
<label><input  type="radio" class="q" name="q3" value="4">4</label>
<label><input  type="radio" class="q" name="q3" value="3">3</label>
<label><input  type="radio" class="q" name="q3" value="2">2</label>
<label><input  type="radio" class="q" name="q3" value="1">1</label>
</fieldset>
<p id="score-message"></p>
<button class="btn-score" type="button" id="btn">合計得点を見る</button>