Passing Parmeter zu js Funktion

Question

Ich habe diesen Code, der eine Tabelle füllt. Die allerletzte Spalte der Tabelle ist eine Schaltfläche mit einer Onclick-Funktion. Ich versuche, eine Variable übergeben, aber ich erhalte den folgenden Fehler:

Uncaught ReferenceError: obj is not defined 

Ich weiß, was dieser Fehler bedeutet, aber ich weiß nicht, wie es zu beheben.

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>"; 
} 
} 

Answer 1

Sie generieren eine HTML-Zeichenfolge mit eingebettetem JavaScript. Wenn dieses JavaScript ausgeführt wird, befindet es sich in einem völlig anderen Bereich, in dem objnicht definiert ist.

Arbeiten Sie nicht mit dem DOM, indem Sie HTML-Strings einfügen. Verwenden Sie Standard-DOM-Methoden (wie createElement und appendChild). Dann können Sie einen Ereignis-Listener hinzufügen und Ihren Gültigkeitsbereich erhalten.

Sie können auch die relevanten Daten auf dem Element speichern, um zu vermeiden, dass ein Abschluss erstellt werden muss.

Zum Beispiel etwas entlang der Linien von:

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); 

} 

Answer 2

Das Problem ist, dass Sie einen String-Wert an den onclick Inline-Handler haben, wie Sie es verketten müssen:

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