JavaScript onclick报错：无法读取undefined的info2属性问题求助

这个问题的核心原因是变量作用域被覆盖：当你用通用函数异步加载JSON并生成元素时，后续的请求会覆盖之前的变量引用，导致点击早生成的元素时，指向的是最后加载的JSON数据（甚至未定义）。以下是几种通用解决方案，无需重复编写函数：

方案1：利用闭包保留元素上下文 #

在生成元素的逻辑中，用立即执行函数创建闭包，把当前项的数据绑定到点击事件里，确保每个元素的点击事件引用独立的数据源：

function renderItems(data, container) {
  data.items.forEach(item => {
    const element = document.createElement('div');
    // 用闭包锁定当前item的引用
    element.onclick = (function(currentItem) {
      return function() {
        console.log(currentItem.info2); // 正确访问当前项的info2
      }
    })(item);
    // 元素渲染逻辑（比如添加文本、样式）
    container.appendChild(element);
  });
}

方案2：使用ES6块级作用域（推荐） #

如果项目支持ES6+，直接在循环/forEach中用let或箭头函数，它们会自动创建块级作用域，每个迭代的变量都是独立的：

function renderItems(data, container) {
  data.items.forEach(item => {
    const element = document.createElement('div');
    // 箭头函数会捕获当前迭代的item引用
    element.onclick = () => {
      console.log(item.info2);
    };
    container.appendChild(element);
  });
}

方案3：用自定义数据属性存储数据 #

把需要用到的数据存到元素的data-*属性中，点击时直接从元素本身读取，彻底脱离上下文依赖：

function renderItems(data, container) {
  data.items.forEach(item => {
    const element = document.createElement('div');
    // 将数据转成JSON字符串存入自定义属性
    element.dataset.itemInfo = JSON.stringify(item);
    element.onclick = function() {
      // 点击时解析数据使用
      const currentItem = JSON.parse(this.dataset.itemInfo);
      console.log(currentItem.info2);
    };
    container.appendChild(element);
  });
}

通用加载逻辑示例 #

确保每个JSON加载完成后，调用渲染函数时传入对应的容器，避免全局容器冲突：

async function loadAndRender(jsonUrl, containerId) {
  const response = await fetch(jsonUrl);
  const data = await response.json();
  const container = document.getElementById(containerId);
  renderItems(data, container);
}

// 分别加载两个JSON到对应标签页容器
loadAndRender('json1.json', 'tab1-container');
loadAndRender('json2.json', 'tab2-container');

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