如何在单选按钮（Radio Button）选中时修改变量的值？

当然有可行的实现方法，你的代码里存在几个逻辑和语法问题，调整后就能实现需求：

原代码的核心问题 #

• 变量作用域错误：genderReflection 定义在 window.onload 函数内部，外部的按钮点击事件无法访问该变量，会导致未定义报错。
• DOM元素引用错误：Male.addEventListener 中的 Male 未声明，应该使用前面定义的 maleRelaxation 变量。
• 对象取值错误：计算总和时直接对 genderReflection 对象用 parseInt，会得到 NaN，应该取对象的 price 属性值。
• 单选按钮逻辑缺陷：仅给男性单选按钮添加了事件，女性按钮未处理；且点击事件会重复累加数值，应该在选中时直接赋值而非累加，同时监听 change 事件更适配单选按钮的交互（支持键盘操作选中）。

修正后的完整代码 #

<input type="number" id="firstInput">
<div id="calculator">
  <input type="radio" id="Male" name="gender" value="5">
  <label for="Male">Male</label>
  <input type="radio" id="Female" name="gender" value="-161">
  <label for="Female">Female</label>
</div>

<input type="number" id="secondInput">
<input type="number" id="thirdInput">
<button>ADD</button>
<h1>result</h1>

<script>
// 提前声明全局变量，确保所有事件都能访问
let genderReflection = {
  price: 5 // 默认值
};

const firstInput = document.querySelector('#firstInput');
const secondInput = document.querySelector('#secondInput');
const thirdInput = document.querySelector('#thirdInput');
const btnAdd = document.querySelector('button');
const result = document.querySelector('h1');
const maleRadio = document.getElementById('Male');
const femaleRadio = document.getElementById('Female');

// 给两个单选按钮绑定change事件
maleRadio.addEventListener('change', function() {
  if (this.checked) {
    genderReflection.price = parseFloat(this.value);
  }
});

femaleRadio.addEventListener('change', function() {
  if (this.checked) {
    genderReflection.price = parseFloat(this.value);
  }
});

// 计算按钮点击事件
btnAdd.addEventListener('click', () => {
  // 处理输入为空的情况，默认转为0
  const num1 = parseFloat(firstInput.value) || 0;
  const num2 = parseFloat(secondInput.value) || 0;
  const num3 = parseFloat(thirdInput.value) || 0;
  const total = num1 + num2 + num3 + genderReflection.price;
  result.innerText = total.toFixed(3);    
});
</script>

关键改动说明 #

• 将 genderReflection 提升为全局变量，确保按钮点击事件能正常访问。
• 给两个单选按钮都绑定 change 事件，当按钮被选中时，直接将对应的值赋值给 genderReflection.price，避免重复累加。
• 计算总和时，处理输入框为空的情况（转为0），避免出现 NaN 结果。
• 修正DOM元素的引用错误，统一使用声明好的变量操作元素。

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