双单选表单计分异常：仅统计第二表单选项分数问题排查

核心错误原因 #

你代码里的赋值运算符写反了：所有=+必须改成+=。=+的作用是将右侧值转为正数后直接赋值给变量（比如TacoSUM =+ 2等价于TacoSUM = 2），而非累加。这会导致如果用户同时选中第一个和第二个表单的选项，后面的赋值会覆盖前面的结果，最终只有第二个表单的选项分数生效，第一个表单的分数被完全覆盖消失。

修复后的代码 #

HTML 修复（修正语法错误） #

<form>
  <legend class="question 1"></legend>
  <div class="form-control">
    <label for="option-1">
      <input type="radio" id="option-1" value="A1">Fully agree
    </label>
    <label for="option-2">
      <input type="radio" id="option-2" value="A2">Somewhat agree
    </label>
    <label for="option-3">
      <input type="radio" id="option-3" value="A3">No opinion
    </label>
    <label for="option-4">
      <input type="radio" id="option-4" value="A4">Somewhat against
    </label>
    <label for="option-5">
      <input type="radio" id="option-5" value="A5">Fully against
    </label>
  </div>
</form>

<form>
  <legend class="question 2"></legend>
  <div class="form-control">
    <label for="option-6">
      <input type="radio" id="option-6" value="A6">Fully agree
    </label>
    <label for="option-7">
      <input type="radio" id="option-7" value="A7">Somewhat agree
    </label>
    <label for="option-8">
      <input type="radio" id="option-8" value="A8">No opinion
    </label>
    <label for="option-9">
      <input type="radio" id="option-9" value="A9">Somewhat against
    </label>
    <label for="option-10">
      <input type="radio" id="option-10" value="A10">Fully against
    </label>
  </div>
</form>

<button onclick="food()">DONE</button>

JavaScript 修复（修正运算符+逻辑优化） #

let TacoSUM = 0;
let PizzaSUM = 0;
let HamburgerSUM = 0;

function food() {
  // 重置分数，避免多次点击按钮重复累加
  TacoSUM = 0;
  PizzaSUM = 0;
  HamburgerSUM = 0;

  // 第一个表单选项判断
  if (document.getElementById("option-1").checked) {
    TacoSUM += 2;
    PizzaSUM += 1;
    HamburgerSUM += 0;
  }
  if (document.getElementById("option-2").checked) {
    TacoSUM += 2;
    PizzaSUM += 1;
    HamburgerSUM += 2;
  }
  if (document.getElementById("option-3").checked) {
    TacoSUM += 1;
    PizzaSUM += 0;
    HamburgerSUM += 2;
  }
  if (document.getElementById("option-4").checked) {
    TacoSUM += 0;
    PizzaSUM += 0;
    HamburgerSUM += 0;
  }
  if (document.getElementById("option-5").checked) {
    TacoSUM += 1;
    PizzaSUM += 2;
    HamburgerSUM += 0;
  }

  // 第二个表单选项判断
  if (document.getElementById("option-6").checked) {
    TacoSUM += 0;
    PizzaSUM += 2;
    HamburgerSUM += 0;
  }
  if (document.getElementById("option-7").checked) {
    TacoSUM += 2;
    PizzaSUM += 0;
    HamburgerSUM += 2;
  }
  if (document.getElementById("option-8").checked) {
    TacoSUM += 0;
    PizzaSUM += 0;
    HamburgerSUM += 1;
  }
  if (document.getElementById("option-9").checked) {
    TacoSUM += 0;
    PizzaSUM += 2;
    HamburgerSUM += 0;
  }
  if (document.getElementById("option-10").checked) {
    TacoSUM += 1;
    PizzaSUM += 0;
    HamburgerSUM += 0;
  }

  alert(`Taco=${TacoSUM / 4 * 100}% Pizza=${PizzaSUM / 4 * 100}% Hamburger=${HamburgerSUM / 4 * 100}%`);
}

额外优化建议 #

用对象映射简化重复的判断逻辑，后续新增选项只需修改映射表：

let scores = {
  Taco: 0,
  Pizza: 0,
  Hamburger: 0
};

// 定义每个选项对应的分数映射
const optionScores = {
  "option-1": { Taco: 2, Pizza: 1, Hamburger: 0 },
  "option-2": { Taco: 2, Pizza: 1, Hamburger: 2 },
  "option-3": { Taco: 1, Pizza: 0, Hamburger: 2 },
  "option-4": { Taco: 0, Pizza: 0, Hamburger: 0 },
  "option-5": { Taco: 1, Pizza: 2, Hamburger: 0 },
  "option-6": { Taco: 0, Pizza: 2, Hamburger: 0 },
  "option-7": { Taco: 2, Pizza: 0, Hamburger: 2 },
  "option-8": { Taco: 0, Pizza: 0, Hamburger: 1 },
  "option-9": { Taco: 0, Pizza: 2, Hamburger: 0 },
  "option-10": { Taco: 1, Pizza: 0, Hamburger: 0 }
};

function food() {
  // 重置分数
  Object.keys(scores).forEach(key => scores[key] = 0);

  // 遍历选项并累加分数
  Object.entries(optionScores).forEach(([optionId, score]) => {
    if (document.getElementById(optionId).checked) {
      scores.Taco += score.Taco;
      scores.Pizza += score.Pizza;
      scores.Hamburger += score.Hamburger;
    }
  });

  alert(`Taco=${scores.Taco / 4 * 100}% Pizza=${scores.Pizza / 4 * 100}% Hamburger=${scores.Hamburger / 4 * 100}%`);
}

内容的提问来源于stack exchange，提问作者lazydbird