如何修复JavaScript设置输入框值时出现的Uncaught TypeError: Cannot set property 'value' of null错误

这个错误其实很常见，我帮你拆解下问题和修复方案：

核心问题：选择器与实际元素不匹配 #

你写的JavaScript代码里用了document.querySelector('select[name=butterbean_stm_car_manager_setting_engine]')去查找元素，但对应的HTML元素是<input>标签，不是<select>。这就导致querySelector找不到目标元素，返回了null，当你试图给null设置value属性时，自然就抛出了Uncaught TypeError。

第一步：修正选择器 #

把选择器里的select改成input，匹配实际的HTML元素：

let engine = document.querySelector('input[name=butterbean_stm_car_manager_setting_engine]');
engine.value = "0";

第二步：确保脚本在DOM加载完成后执行 #

即使选择器正确，如果你的脚本在DOM还没渲染完成时就执行，同样会找不到元素返回null。推荐两种解决方式：

• 把JavaScript代码放在HTML文档的</body>结束标签之前，浏览器会先渲染完所有DOM元素再执行脚本。
• 用DOMContentLoaded事件包裹代码，确保DOM加载完成后才执行：

document.addEventListener('DOMContentLoaded', function() {
  let engine = document.querySelector('input[name=butterbean_stm_car_manager_setting_engine]');
  // 额外增加存在性判断，避免元素不存在时再次报错
  if (engine) {
    engine.value = "0";
  }
});

额外优化：提升代码健壮性 #

上面的代码里增加了if (engine)的判断，这是个好习惯——万一页面结构后续有变动，目标元素不存在时，代码不会抛出错误，让脚本更稳定。

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