如何將 Object 作為參數傳遞給 function onclick

Question

I am facing some issues while trying to pass JSON object as a parameter to function, but on that function: while consoling log the data I am getting [object.object].

這是我的代碼：

function buildTable(data) {
  var table = document.getElementById("myTable");
  table.innerHTML = "";
  for (var i = 0; i < data.length; i++) {
    var row = `<tr class="item-id-${data[i].id}"> <td>${data[i].name}</td> <td>${data[i].audio_muted}</td> <td>${data[i].video_muted}</td> <td><button id="audio_handle" class="btn btn-primary" onclick="handleMembers('${data[i]}')">Video</button></td>`;

    table.innerHTML += row;
  }
}

function handleMembers(data) {
  console.log("data = >", data); //= [object:object]
}

問題是當我從模板文字字符串中的按鈕調用句柄 function 時，我得到 [object:object] 為 output

我哪里錯了？

Answer 1

我在以下代碼段中修復了幾個點，並添加了一些 HTML 和一些示例數據：

 // some sample data for illustration: const data=[{id:1,name:"Harry",audio_muted:1,video_muted:1},{id:2,name:"Ron",audio_muted:1,video_muted:0},{id:3,name:"Hermiony",audio_muted:0,video_muted:1},{id:4,name:"Ginny",audio_muted:0,video_muted:1}]; const tbl=document.getElementById("myTable"); tbl.innerHTML = data.map((itm,i)=>`<tr class="item-id-${itm.id}"> <td>${itm.name}</td> <td>${itm.audio_muted}</td> <td>${itm.video_muted}</td> <td><button data-id="${i}" class="btn btn-primary">Video</button></td>`).join("\n") tbl.addEventListener("click",ev=>{ if (ev.target.tagName==="BUTTON") console.log("data = >", data[ev.target.dataset.id]); //= [object:object] })

 <table id="myTable"></table>

正如@Quentin 已經提到的，您不應在模板字符串中包含 JavaScript 代碼。 這變得太復雜而無法閱讀和維護。 相反，我在表本身上使用了一個委托事件處理程序來監聽button元素的點擊。 通過這樣做，不再需要兩個命名函數。

我想到的另一件事是：永遠不要在 for 循環中使用element.innerHTML +=...因為這可能會變得非常慢。 通常最好將整個 HTML 字符串組裝到一個 go 中，然后將其分配給innerHTML屬性。

Answer 2

我認為這是錯誤的做法。 您應該嘗試使用 DOM api 創建元素並將 eventListener 添加到所選元素，例如：

function buildTable(data) {
 const table = document.getElementById("myTable");

 for(let d of data) {
    const tr = document.createElement("tr");      
    const td1 = document.createElement("td");
    td1.textContent = d.name;       
    
    const td2 = document.createElement("td");
    td2.textContext = d.audio_muted;
    
    const td3 = document.createElement("td");
    td3.textContent = d.video_muted;
    
    const tdButton = document.createElement("button");
    tdButton.classList.add("btn", "btn-primary");
    tdButton.addEventListener("click", () => handleMembers(d));
    
    tr.appendChild(td1)
    tr.appendChild(td2)
    tr.appendChild(td3)
    tr.appendChild(tdButton);
    
    table.appendChild(tr)

 }
}