JavaScript报Uncaught TypeError cannot read property of null (reading 'value')错误如何解决

报错原因&修复方案 #

核心错误点 #

• 变量声明语法错误：var name1.value = xxx属于非法写法，不能在声明变量时直接加.value后缀，需要先获取DOM节点再读取/赋值value属性
• 循环边界错误：硬编码循环次数i < 40，但页面中test1/test2类的元素远少于40个，当i超过实际元素数量时，getElementsByClassName('xxx')[i]会返回null，读取null的value就会触发你遇到的报错
• DOM选择逻辑错误：test1/test2类同时加在了外层div和内层input上，通过类名获取到的元素包含没有value属性的div节点，读取div的value也会触发报错
• HTML语法错误：存在标签名拼写错误（labe→label）、属性书写错误（onclick="test"(this)"→onclick="test(this)"、type"text"→type="text"）、标签开头多余空格（< div→<div）等问题

修复后代码 #

JS代码

function test() {
  // 只获取input类型的test1、test2元素，排除外层div
  const nameInputs = document.querySelectorAll('input.test1');
  const addressInputs = document.querySelectorAll('input.test2');
  // 取实际元素长度作为循环边界，避免读取null
  const len = Math.min(nameInputs.length, addressInputs.length);
  
  for(let i=0; i < len; i++) {
    const nameVal = nameInputs[i].value;
    if(nameVal === "test4"){
      addressInputs[i].value = "test5";
    } else if (nameVal === "test6"){
      addressInputs[i].value = "test7";
    } else if (nameVal === "test8"){
      addressInputs[i].value = "test9";
    }
  }
}

HTML代码

<div class="form-group test1">
  <label for="power-full.names"> Names full</label>
  <input name="power-full.names" list="power-full.names" type="text"
  class="form-group test1" onclick="test(this)">
  <datalist type="text" id="power-full.names">
    <option value="test4">
    <option value="test6">
    <option value="test8">
  </datalist>
</div>

<div class="form-group test2">
  <label for="power-full.adress"> Adress full</label>
  <input name="power-full.adress" list="power-full.adress" type="text"
  class="form-group test2">
  <datalist type="text" id="power-full.adress">
    <option value="test5">
    <option value="test7">
    <option value="test9">
  </datalist>
</div>

优化建议 #

如果是单组姓名+地址的场景，不需要循环遍历所有元素，直接通过id获取对应节点操作即可，性能更高。

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