将parmeter传递给js函数

Passing parmeter to js function

本文关键字:js 函数 parmeter      更新时间:2023-09-26

我有这段代码,它填充了一个表。表的最后一列是一个具有onclick功能的按钮。我试图传递一个变量,但我得到了以下错误:

Uncaught ReferenceError: obj is not defined

我知道那个错误意味着什么,但我不知道如何修复它。

if(obj[i].book_status =="Found"){
 txt += "<tr><td>"+obj[i].Member_ID+"</td><td>"+obj[i].FirstName+"</td>" + 
          "<td>"+obj[i].LastName+"</td><td>" +obj[i].IssueDate+"</td><td>"+
          obj[i].DueDate+"</td><td><button  class='btn btn-primary' onClick='getID(obj[i].Member_ID);'>CheckIn</button></td></tr>";
 }
}

您正在生成一个HTML字符串,其中嵌入了JavaScript。当执行该JavaScript时,它将处于一个完全不同的范围中,其中没有定义obj

不要通过将HTML字符串混合到DOM中来处理DOM。使用标准的DOM方法(如createElement和appendChild)。然后,您可以添加一个事件侦听器并保留您的作用域。

您还可以将相关数据存储在元素上,以避免创建闭包。

例如,类似的东西

var row, td, item, button;
item = obj[i];
if (item.book_status == "Found") {
    row = document.createElement("tr");
    cell = document.createElement("td");
    cell.appendChild(document.createTextNode(item.Member_ID));
    row.appendChild(cell);
    cell = document.createElement("td");
    cell.appendChild(document.createTextNode(item.FirstName));
    row.appendChild(cell);
    cell = document.createElement("td");
    cell.appendChild(document.createTextNode(item.LastName));
    row.appendChild(cell);
    cell = document.createElement("td");
    cell.appendChild(document.createTextNode(item.IssueDate));
    row.appendChild(cell);
    cell = document.createElement("td");
    cell.appendChild(document.createTextNode(item.DueDate));
    row.appendChild(cell);
    cell = document.createElement("td");
    button = document.createElement("button");
    button.appendChild(document.createTextNode("CheckIn"));
    button.classList.add("btn");
    button.classList.add("btn-primary");
    button.setAttribute("data-id", item.Member_ID);
    button.addEventListener("click", getIDHandler)
    row.appendChild(cell);
    function getIDHandler(event) {
        getID(this.getAttribute("data-id"));
    }
    SOMETHING.appendChild(row);
}

问题是在onclick内联处理程序中有一个字符串值,因为您必须将它连接起来:

"</td><td><button  ... onClick='getID('"+ obj[i].Member_ID +"');'>...</td></tr>";