如何根据下拉选项变更变量值？现有JavaScript代码失效求助

你的代码存在三个核心问题，导致函数无法正常触发并完成赋值：

1. 事件绑定错误 #

你给select标签添加了class="exerciseFunction"，但这不会触发同名函数。需要给select绑定change事件，才能在选项切换时执行对应函数。

2. 选项值判断不匹配 #

你在函数里判断value == 'Inactive'，但对应选项的value属性是noExercise，Inactive只是选项显示的文本，不是实际的value值，所以条件永远不成立。

3. 无效的select属性 #

select标签不存在type="number"属性，属于冗余代码，应当删除。

修复后的完整代码 #

let exerciseValue = {
  price: 0
}

function exerciseFunction() {
  const selectVal = document.getElementById('exerciseInput').value;
  // 根据不同选项值设置对应price
  switch(selectVal) {
    case 'noExercise':
      exerciseValue.price = 150;
      break;
    case 'lightExercise':
      exerciseValue.price = 180; // 示例值，可自行修改
      break;
    case 'moderateExercise':
      exerciseValue.price = 200;
      break;
    case 'activeExercise':
      exerciseValue.price = 220;
      break;
    case 'veryActiveExercise':
      exerciseValue.price = 250;
      break;
    case 'extraActiveExercise':
      exerciseValue.price = 280;
      break;
    default:
      exerciseValue.price = 0; // 默认值
  }
  // 控制台打印验证结果
  console.log('当前price值:', exerciseValue.price);
}

<select id="exerciseInput" onchange="exerciseFunction()">
  <option value="">Exercise</option>
  <option value="noExercise">Inactive</option>
  <option value="lightExercise">Light(1-3 times/week)</option>
  <option value="moderateExercise">Moderate(4-5 times/week)</option>
  <option value="activeExercise">Active(daily exercise/intense exercise 3-4 times/week)</option>
  <option value="veryActiveExercise">Very Active(intense exercise daily)</option>
  <option value="extraActiveExercise">Extra Active(very intense daily or physical activity)</option>
</select>

额外优化建议 #

推荐使用addEventListener绑定事件，比inline的onchange更符合现代JS规范，也便于代码维护：

document.getElementById('exerciseInput').addEventListener('change', exerciseFunction);

使用该方式后，html标签里的onchange="exerciseFunction()"可以删除。

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