JavaScript读取.value时报Cannot read properties of null错误怎么解决？

出现Cannot read properties of null (reading 'value')错误的核心原因是document.getElementById()没有匹配到对应元素，返回了null，后续尝试读取null的value属性触发报错，具体错误点如下：

• ID匹配错误：JS代码中尝试获取ID为inputbutton的元素的value，但你需要的输入内容存放在ID为text的<input>元素中，而非按钮元素
• HTML ID存在冗余空格：按钮的ID属性写为id="inputbutton "，末尾多了一个空格，和JS中查询的inputbutton不完全匹配，就算你要获取按钮元素也会返回null
• 额外拼写错误：<input>标签的长度限制属性拼写错误，你写的maxlengh正确拼写为maxlength

修正后的JavaScript代码 #

function startFunction() {
  // 选中ID为text的输入框元素读取内容
  let string = document.getElementById("text").value;
  console.log(string);
}

修正后的HTML代码 #

<!-- 修正maxlength拼写错误 -->
<input id="text" placeholder="Type Something" maxlength="50">
<!-- 移除ID末尾的多余空格 -->
<button id="inputbutton" onclick="startFunction()">Submit</button>

• 使用getElementById查询元素时，必须保证查询字符串和HTML中定义的ID完全一致，前后空格、大小写不同都会导致匹配失败返回null
• 读取表单输入内容时，需要选中对应的<input>/<select>等表单元素，而非触发点击事件的按钮

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