求助：勾选Dragonborn复选框后无法提升strScore数值的问题

你的代码有两个核心问题导致勾选复选框后无反应：

问题分析 #

• 字符串类型拼接错误：输入框的value返回的是字符串，直接执行strScore + 2会变成字符串拼接（比如10+2得到"102"，而非数值12）。
• 未将计算值写回输入框：你仅修改了变量strScore的内容，但没有把新值赋值给对应的输入元素，页面自然不会显示变化。

修复后的代码 #

function updateRace() {
  // 获取strength输入元素的DOM对象
  const strInput = document.getElementById("strScore");
  // 将输入值转为数值，默认用10作为 fallback（和输入框初始值一致）
  let strScore = parseInt(strInput.value) || 10;
  const isDragonbornChecked = document.getElementById("dragonbornRace").checked;

  if (isDragonbornChecked) {
    // 勾选时给力量值加2
    strScore = strScore + 2;
  } else {
    // 取消勾选时恢复初始值（如果需要保留用户自定义的初始值，建议提前存储基础值）
    strScore = 10;
  }

  // 将计算后的数值写回输入框
  strInput.value = strScore;
  // 同步触发属性 modifier 更新
  updateMods();
}

进阶优化建议 #

如果需要支持用户先修改初始能力值再选择种族，或者添加更多种族，可以做以下优化：

1. 页面加载时保存所有能力值的初始值，比如：

   // 全局变量存储基础值
   const baseScores = {
     str: parseInt(document.getElementById("strScore").value) || 10,
     // 其他能力值同理
   };
   

   这样取消种族勾选时可以恢复到用户修改后的基础值，而非固定的10。

2. 给种族复选框添加自定义数据属性，统一处理种族加成：

   <input type="checkbox" id="dragonbornRace" data-str-boost="2" onchange="updateRace()">
   <input type="checkbox" id="elfRace" data-dex-boost="2" onchange="updateRace()">
   

   然后编写通用的updateRace函数，自动读取数据属性并更新对应能力值，避免重复写判断逻辑。

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