调用querySelectorAll获取元素后修改style报icon.style未定义如何解决

报错根因 #

• 你通过document.querySelectorAll('.checkIcon')获取到的是页面所有勾选图标组成的NodeList集合，集合本身没有style属性，只有集合内的单个DOM元素才具备该属性，直接访问icon.style自然会抛出undefined错误。
• 你的列表项是循环生成的多组结构，每个输入框仅对应它所在span标签内的唯一一个勾选图标，全局抓取所有图标无法精准匹配当前正在输入的输入框对应的目标图标。

修复方案 #

不需要全局预获取所有checkIcon元素，在输入事件触发时，基于当前输入框定位到同级的对应勾选图标再操作即可，修改后的代码如下：

let check = document.querySelectorAll('.input_Text')
check.forEach(element => element.addEventListener('input',(e)=>{
   var data = element.getAttribute('data-verb').toString();
   var value = e.target.value;
   // 定位当前输入框对应的勾选图标：input的下一个同级元素就是.checkIcon
   var currentIcon = element.nextElementSibling;
   
   if (value == ""){
    element.style.border = "1px solid blue";
    element.style.color = "black";
   }
   else if (data.startsWith(value)){
      element.style.border = "5px solid green";
      element.style.color = "green";
   }
   else{
      element.style.border = "5px solid red";
      element.style.color = "red";
   }

   value == data ? currentIcon.style.color = "green" : currentIcon.style.color = "";
}));

如果你的DOM结构后续调整，输入框和图标之间插入了其他元素，也可以用element.parentElement.querySelector('.checkIcon')来查找当前span内的勾选图标，兼容性更强。

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