如何用JS获取HTML下拉菜单值？解决TypeError空值读取问题

你遇到的Cannot read properties of null (reading 'value')错误，核心原因是JS代码在DOM元素加载完成前就执行了——浏览器还没渲染出id="fractions"的下拉框，你的JS就已经尝试去获取它，自然返回null，没法读取value属性。下面是具体的解决办法：

解决方法1：把JS代码放到HTML文档末尾 #

将你的<script>标签移到</body>闭合标签之前，这样浏览器会先加载完所有DOM元素，再执行JS代码：

<body>
  <!-- 你的其他HTML内容，包括下拉框、输入框等 -->
  <label for="fractions"></label>
  <select name="fractions" id="fractions">
      <option value="0">.0</option>
      <option value="0.125">1/8</option>
      <option value="0.25">1/4</option>
      <option value="0.333">1/3</option> <!-- 这里建议修正精度，0.67是错误的，1/3约等于0.333 -->
      <option value="0.5">1/2</option>
      <option value="0.75">3/4</option>
  </select>

  <!-- JS代码放在此处 -->
  <script>
    const fractions = document.querySelector('#fractions');
    console.log(fractions.value); // 现在可以正常获取值了
  </script>
</body>

解决方法2：用DOMContentLoaded事件包裹代码 #

如果不想移动JS文件的位置，就把代码放在DOMContentLoaded事件回调里，等待DOM完全加载后再执行：

document.addEventListener('DOMContentLoaded', function() {
  const fractions = document.querySelector('#fractions');
  const fractionsValue = parseFloat(fractions.value);
  console.log(fractionsValue); // 输出选中项的十进制数值
});

额外检查项 #

确认你的HTML页面中没有重复的fractions id——如果有其他元素也用了这个id，会导致选择器获取到错误元素，甚至返回null。

完整功能实现示例 #

针对你“输入数字+下拉值相加”的需求，这里提供一个完整的可运行示例：

<input type="number" id="wholeNumber" placeholder="输入整数部分">
<select name="fractions" id="fractions">
    <option value="0">.0</option>
    <option value="0.125">1/8</option>
    <option value="0.25">1/4</option>
    <option value="0.333">1/3</option>
    <option value="0.5">1/2</option>
    <option value="0.75">3/4</option>
</select>
<button id="calculateBtn">计算总和</button>
<p id="result"></p>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const calculateBtn = document.getElementById('calculateBtn');
  calculateBtn.addEventListener('click', function() {
    // 获取输入的整数，默认值为0避免空输入报错
    const wholeNum = parseFloat(document.getElementById('wholeNumber').value) || 0;
    // 获取下拉框的分数值
    const fractionVal = parseFloat(document.getElementById('fractions').value) || 0;
    // 计算总和并保留3位小数
    const total = (wholeNum + fractionVal).toFixed(3);
    // 显示结果
    document.getElementById('result').textContent = `计算结果：${total}`;
  });
});
</script>

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