表单输入框点击帮助按钮触发弹框报addEventListener空值错误求助

错误原因 #

• 索引不匹配：你的循环变量i从0开始计数，但HTML中帮助图标的ID是从help-icon-1开始编号的，第一次循环时会查找不存在的help-icon-0，返回null后调用addEventListener就会抛出空指针错误
• HTML语法错误：第二个帮助图标的ID属性多写了一个引号，写成了id=""help-icon-2"，浏览器解析属性时出错，导致无法正常选中该元素

修复方案 #

更推荐的关联实现（无需依赖ID编号） #

直接通过DOM层级关系关联同一父容器内的元素，后续新增表单字段时无需修改JS逻辑，稳定性更高：

// 选中所有帮助图标
const helpIcons = document.querySelectorAll('.help-icon');
helpIcons.forEach(icon => {
  icon.addEventListener('click', event => {
    event.preventDefault();
    // 找到当前图标所属的父容器
    const formItemContainer = icon.closest('.label-container');
    // 选中同容器内的帮助弹窗
    const targetPopup = formItemContainer.querySelector('.help-popup');
    targetPopup.classList.toggle('show-popup');
  });
});

原有逻辑的修复方案 #

如果你要保留原有的ID匹配逻辑，需要做两处修改：

1. 删掉HTML中第二个帮助图标ID多出来的引号，改成id="help-icon-2"
2. 将循环变量的起始值改为1，保证和ID的编号匹配：

let z = document.querySelectorAll(".help-popup");
// i从1开始计数，到z.length结束
for(let i = 1; i <= z.length; i++) {
  let getHelpPopUp = document.getElementById(`help-icon-${i}`);
  getHelpPopUp.addEventListener("click", (event) => {
    event.preventDefault();
    let reachPopup = document.getElementById(`popup-${i}`);
    reachPopup.classList.toggle("show-popup");
  })
}

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