Flask项目中给搜索图标绑定addEventListener点击事件不生效，正则校验输入求助

• 最直接的执行报错：绑定事件时引用的DOM节点处于未定义状态
  代码里写的是searchImg.addEventListener('click', ...)，但你在点击事件的回调函数内部，才通过var searchImg = document.getElementById('searchImage')创建局部同名变量。这个局部变量的作用域仅在回调函数内部，完全覆盖不到外层绑定事件的代码段。外层引用的searchImg属于全局作用域下的未定义变量，浏览器执行绑定事件这行代码时会直接抛出Uncaught ReferenceError: searchImg is not defined，直接中断整个脚本的执行，后续逻辑完全不会运行，事件自然绑不上。
• 逻辑顺序错位：获取searchImage DOM节点的代码被写在了点击事件的回调函数内部，这部分代码只有用户点击图片之后才会执行，根本赶不上绑定事件的时机。
• 遗留逻辑bug：使用带全局匹配修饰符g的正则调用test()时，会因为正则对象的lastIndex属性偏移，导致多次点击时匹配结果和实际输入不匹配，即便事件绑定成功也会出现逻辑异常。

调整脚本的执行顺序，先获取DOM节点、再绑定事件，同时修正正则的使用逻辑：

// 页面加载时先获取所有需要的DOM元素
const searchImg = document.getElementById('searchImage');
const searchInput = document.getElementById('searchInput');

// 再给元素绑定点击事件
searchImg.addEventListener('click', function() {
  const inputContent = searchInput.value;
  // 移除正则的全局修饰符，避免lastIndex偏移问题
  if (/test/.test(inputContent)) {
    alert("works")
  } else {
    alert('does not work')
  }
})

你之前写的内联onclick版本能正常运行，本质是两种绑定方式的执行时机不一样：

• 内联onclick的逻辑是点击触发时才执行函数内部的DOM获取、判断逻辑，不会在页面加载解析脚本的阶段就触发未定义变量的报错
• 你写的addEventListener版本，绑定事件的代码是在页面加载时立刻执行的，这时候引用一个不存在的变量，直接导致整个脚本崩溃，事件根本没有被绑定到图片上。

新手常见踩坑点：写JS时要分清楚两段执行时机——页面加载阶段执行的DOM获取、事件绑定逻辑，和用户交互触发的事件回调逻辑，不能把需要提前执行的绑定代码，放到交互后才运行的回调里面。

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