将对象数组传递给另一个函数 onclick

Question

我只是想问如何将对象数组传递给另一个函数。 我有一个功能

 function btnB(weekly) {
    console.log(weekly);
 }

 function btnA() { 
    const array = [{ abc : 123 }, { def : 456 }]        
    div.innerHTML = `<div onclick="btnB(${array[0]});"`;
    divList.appendChild(div);        
 }

 btnA();

我收到一个错误

Uncaught SyntaxError: Unexpected identifier

Answer 1

您不能在模板文字中替换这样的对象。 它将对象转换为字符串，返回[Object object] 。

使用JSON.stringify()将其转换为对象字面量。

function btnA() { 
    const array = [{ abc : 123 }, { def : 456 }]        
    div.innerHTML = `<div onclick='btnB(${JSON.stringify(array[0])});'`;
    divList.appendChild(div);        
 }

您还应该在onclick值周围使用单引号，因为 JSON 在对象键周围使用双引号。

Answer 2

function btnB(weekly) { console.log(weekly); } function btnA() { const array = [{ abc : 123 }, { def : 456 }]; const div = document.createElement('div'); // delete if useless div.addEventListener('click', () => { btnB(array[0]) }); divList.appendChild(div); }

Answer 3

我假设[0]是您尝试解决此问题的一部分，但基于要求将对象数组传递给单击处理程序的问题，我将改为引用它。

无论如何，内联事件处理程序已被弃用且有问题，但在JavaScript 生成的HTML 中使用它们以一种荒谬的方式完成了循环。 通过 JavaScript 附加点击处理程序会更容易、更健壮（和安全），如下所示：

const array = [{ abc: 123 }, { def: 456 }]        
div.innerHTML = '<div></div>' // Just the inner div without onclick
div.firstElementChild.addEventListener('click', () => btnB(array))
divList.appendChild(div)