如何为onClick函数传递对象参数？按钮点击报错求助

你遇到的核心问题是：直接将JavaScript对象拼接到HTML字符串的onClick属性中时，对象会被自动转换为字符串[object Object]，导致生成的代码语法错误（比如startJourney([object object])），浏览器无法正确解析；而如果去掉引号直接写route，则会被当作全局变量（但全局中不存在这个变量），所以输出undefined。

下面提供两种可靠的解决方法：

方法1：将对象转为JSON字符串传递 #

通过JSON.stringify()把对象序列化为JSON字符串，在点击函数中再用JSON.parse()解析回对象，这样就能安全传递参数：

async function getJourneyAwait(){
 const routes = await getJourney();
 var innerHTML = "";
 if(routes !== null) {
  for (var i = 0; i < routes.length; i++){
   var route = routes[i]
   // 用模板字符串简化拼接，同时把对象转为JSON字符串并包裹单引号
   innerHTML += `<p> Route ${i+1}: <button onClick="startJourney('${JSON.stringify(route)}')">Start Trip</button></p>`
  }
  document.getElementById('tripmessage').innerHTML = innerHTML;
 }
}
function startJourney(routeStr){
 // 解析JSON字符串回对象
 const route = JSON.parse(routeStr);
 console.log(route);
}

注意：这里用模板字符串（反引号）可以避免繁琐的字符串拼接，同时要给JSON.stringify(route)包裹单引号，因为HTML中onClick`的属性值是双引号，内部用单引号包裹字符串参数才不会冲突。

方法2：使用DOM元素创建+事件监听器（更推荐） #

这种方式完全避免HTML字符串拼接，直接通过DOM API创建元素并绑定事件，能直接传递对象引用，还能避免潜在的XSS风险：

async function getJourneyAwait(){
 const routes = await getJourney();
 const tripMessageEl = document.getElementById('tripmessage');
 tripMessageEl.innerHTML = ""; // 先清空容器
 if(routes !== null) {
  for (var i = 0; i < routes.length; i++){
   const route = routes[i];
   // 创建段落元素
   const pEl = document.createElement('p');
   pEl.textContent = `Route ${i+1}: `;
   // 创建按钮元素
   const buttonEl = document.createElement('button');
   buttonEl.textContent = 'Start Trip';
   // 绑定点击事件，直接在闭包中传递当前route对象
   buttonEl.addEventListener('click', () => startJourney(route));
   // 组装元素并添加到页面
   pEl.appendChild(buttonEl);
   tripMessageEl.appendChild(pEl);
  }
 }
}
function startJourney(route){
 console.log(route);
}

这种方式的优势在于：不需要处理对象和字符串的转换，直接保留了对象的引用，代码可读性和安全性更高，也是现代前端开发中更推荐的写法。

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