將對象數組傳遞給另一個函數 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)