如何将JS对象变量传入动态创建的HTML按钮onclick函数

你的代码存在几个语法和逻辑问题，导致添加按钮后功能失效：

• 变量名笔误：按钮onclick里写的是location[i]，但你的数组变量是locations，location是浏览器全局对象，根本取不到目标数据。
• 字符串参数未加引号：直接把locations[i].name这类字符串拼进onclick的函数调用里，会被JS当成未定义的变量，比如readDataToConsole(Califonia,...)，直接触发语法错误。
• 数组传递错误：直接拼接locations[i].times会把数组转成逗号分隔的字符串，比如[1,2,3]变成1,2,3，函数会收到三个独立参数而非一个数组，完全不符合预期。
• content未初始化：var content;默认值是undefined，直接拼接字符串会生成undefined<div>...的无效HTML结构。
• 循环变量未声明：for (i in locations)里的i是全局变量，会和后续函数里的i产生冲突。

修正方案1：修复字符串拼接问题 #

把参数转成可解析的JS语法，同时修正所有问题：

<body>
  <button onclick="createDivs()">clickMeNow</button>
  <div id="testDiv"></div>
</body>

var testDivElement = document.getElementById("testDiv");

var locations = [{
    name: "Califonia",
    address: "Califonia Test Address",
    times: [1, 2, 3, 4, 5]
  },
  {
    name: "Idaho",
    address: "Idaho Test Address",
    times: [1, 2, 3]
  },
  {
    name: "Iowa",
    address: "Iowa Test Address",
    times: [0]
  }
];

function createDivs() {
  var content = ""; // 初始化空字符串
  for (let i in locations) { // 用let声明i，避免全局变量污染
    // 字符串参数加单引号，数组转成JSON字符串确保传递正确
    content += '<div>' +
      '<p>' + locations[i].name + '</p>' +
      '<p>' + locations[i].address + '</p>' +
      `<button onclick="readDataToConsole('${locations[i].name}', '${locations[i].address}', ${JSON.stringify(locations[i].times)})">Press Me</button>` +
      '</div>';
  }
  testDivElement.innerHTML = content;
}

function readDataToConsole(name, address, times) {
  console.log(name);
  console.log(address);
  for (let i in times) { // 用let声明循环变量
    console.log(times[i]);
  }
}

修正方案2：用DOM API创建元素（更推荐） #

避免字符串拼接的语法陷阱，直接创建DOM元素并绑定事件，逻辑更清晰：

<body>
  <button onclick="createDivs()">clickMeNow</button>
  <div id="testDiv"></div>
</body>

var testDivElement = document.getElementById("testDiv");

var locations = [{
    name: "Califonia",
    address: "Califonia Test Address",
    times: [1, 2, 3, 4, 5]
  },
  {
    name: "Idaho",
    address: "Idaho Test Address",
    times: [1, 2, 3]
  },
  {
    name: "Iowa",
    address: "Iowa Test Address",
    times: [0]
  }
];

function createDivs() {
  testDivElement.innerHTML = ""; // 先清空原有内容
  locations.forEach(location => {
    // 创建容器div
    const div = document.createElement('div');
    
    // 创建名称p标签
    const nameP = document.createElement('p');
    nameP.textContent = location.name;
    div.appendChild(nameP);
    
    // 创建地址p标签
    const addrP = document.createElement('p');
    addrP.textContent = location.address;
    div.appendChild(addrP);
    
    // 创建按钮并绑定事件
    const btn = document.createElement('button');
    btn.textContent = "Press Me";
    // 直接绑定当前location对象，避免参数传递问题
    btn.addEventListener('click', () => {
      readDataToConsole(location.name, location.address, location.times);
    });
    div.appendChild(btn);
    
    testDivElement.appendChild(div);
  });
}

function readDataToConsole(name, address, times) {
  console.log(name);
  console.log(address);
  times.forEach(time => { // 用forEach遍历数组更安全
    console.log(time);
  });
}

这种方式无需处理字符串转义，事件绑定更直观，也不容易出现语法错误。

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