为动态创建的Window变量添加addEventListener时出现未定义错误

你这段代码报错的核心原因有三个：一是某个ID对应的元素在当前页面不存在，导致getElementById返回null/undefined，调用addEventListener直接报错；二是循环用var导致的作用域问题，回调里的xx会变成循环结束后的最终值，就算元素找到，预览元素也会对应错误；三是代码里存在语法错误。

修复方案 #

1. 先判断元素是否存在，避免报错阻断执行

在给元素绑定监听器前，先检查元素是否获取成功，不存在就跳过，防止报错影响后续代码：

for (let xx = 0; xx < fileInputIDs.length; xx++) {
   const fileInput = document.getElementById(fileInputIDs[xx][0]);
   const previewElement = document.getElementById(fileInputIDs[xx][1]);

   // 检查两个元素是否都存在，不存在就跳过当前循环
   if (!fileInput || !previewElement) {
       console.warn(`元素ID ${fileInputIDs[xx][0]} 或 ${fileInputIDs[xx][1]} 未找到，跳过`);
       continue;
   }

   // 若必须挂载到全局window，保留这两行；否则可以直接用局部变量
   window[`fileInput_${xx}`] = fileInput;
   window[`fileInputPreview_${xx}`] = previewElement;

   fileInput.addEventListener('change', ev => {
       previewElement.innerHTML = '';
       const files = ev.target.files;
       // 加判断避免用户取消选择文件时传入undefined
       if (files.length > 0) {
           validateImage(files[0]);
       }
   });
}

2. 替换var为let解决作用域问题

原来的var xx会有变量提升，所有回调函数共享同一个xx的作用域，循环结束后xx是数组的长度值，导致window['fileInputPreview_'+xx]找不到对应元素。用let xx可以为每次循环创建独立作用域，回调里的xx会对应当前循环的索引。

3. 修正语法错误

原代码里的this file = ev.target.files ;是语法错误，改为const files = ev.target.files;即可。

额外优化：减少全局污染（可选） #

如果不是必须要把元素挂载到全局window对象上，完全可以直接用局部变量，代码更简洁且避免全局变量污染：

for (let xx = 0; xx < fileInputIDs.length; xx++) {
   // 解构赋值更清晰
   const [inputId, previewId] = fileInputIDs[xx];
   const fileInput = document.getElementById(inputId);
   const previewElement = document.getElementById(previewId);

   if (!fileInput || !previewElement) {
       console.warn(`元素ID ${inputId} 或 ${previewId} 未找到，跳过`);
       continue;
   }

   fileInput.addEventListener('change', ev => {
       previewElement.innerHTML = '';
       const files = ev.target.files;
       files.length && validateImage(files[0]);
   });
}

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