JS报Uncaught TypeError(setting 'value')错误，类选择器场景下代码如何修改？

报错根因 #

报错有两个核心触发原因：

1. 你写死了循环上限为30，但页面中test2类的元素总数远小于30，当i超过元素集合的最大索引时，address1就会变成undefined，此时给undefined设置value属性就会抛出对应错误
2. document.getElementsByClassName('test2')会把所有带test2类的元素都选中，包括外层的<div class="form grup test2">，div元素本身没有value属性，即使索引没越界，给div赋值value也会报错

需要修改的位置 #

• 调整选择器，精准选中带test2类的input元素，排除外层div
• 不要写死循环上限30，改为动态获取元素集合的实际长度作为循环边界
• 增加元素存在性校验，确认拿到的元素有效后再执行赋值操作
• 如果你的页面只有1个地址输入框，可以直接删除循环，直接取第一个匹配的元素即可，不需要多余的循环逻辑

修正后的JS代码 #

function information(ele){
  // 精准选中带test2类的input元素，排除div
  const addressInputs = document.querySelectorAll('input.test2');
  // 动态用实际元素长度做循环边界
  for(let i=0; i<addressInputs.length; i++){
    const address1 = addressInputs[i];
    // 先判断元素存在再赋值
    if(!address1) continue;
    if(ele.value === "test4"){
      address1.value = "test5";
    } else if (ele.value === "test6"){
      address1.value = "test7";
    } else if (ele.value === "test8"){
      address1.value = "test9";
    }
  }
}

如果页面只有1个地址输入框，还可以简化成更短的版本：

function information(ele){
  const address1 = document.querySelector('input.test2');
  if(!address1) return;
  const valueMap = {
    'test4': 'test5',
    'test6': 'test7',
    'test8': 'test9'
  };
  address1.value = valueMap[ele.value] || address1.value;
}

内容的提问来源于stack exchange，提问作者I'm still learning