Was ist die Ursache für diesen Fehler, den ich bekommen habe?

Question

Ich verwende JavaScript, um eine HTML-Seite mit Inhalten zu füllen. Einer dieser Inhalte ist ein Button/Link. Der Inhalt wird dynamisch generiert, und wenn der Benutzer die Schaltfläche drückt, muss ich einige Informationen erfassen, die (als Attribut) in die Schaltfläche eingebettet wurden.

Hier ist der allgemeine Code:

var newCell = newRow.insertCell(); 
var button = document.createElement("input"); 
button.type = "image"; 
button.src = "/images/image.png"; 
button.setAttribute("customData", "dynamically generated data"); 
button.setAttribute("onclick", "CustomFunction(this);"); 
newCell.appendChild(button); 


CustomFunction(obj) { 
     var data = obj.getAttribute("customData")); 
}; 

Als ich in die Funktion erhalten (durch Drücken der Taste), der Browser einen Fehler nach dem Vorbild der cannot getAttribute of null object wirft.

Aber es scheint zu funktionieren, wenn ich button.src los werde.

Ich habe bereits einen Weg gefunden, aber ich würde gerne wissen, was dieses Problem verursacht?

EDIT: Hier ist der eigentliche Code:

var newCell = newRow.insertCell(); 
var button = document.createElement("input"); 
button.type = "image"; 
button.src = "/images/image.png"; 
button.setAttribute("customData", "dynamically generated data (JSON format)"); 
button.setAttribute("onclick", "CustomFunction(this);"); 
newCell.appendChild(button); 

function CustomFunction(obj) { 
    buttonObj = obj.querySelector('input[type=image][customData]'); 
    var dataObj = JSON.parse(buttonObj.getAttribute("customData")); 
}; 

Answer 1

Das Problem ist diese Linie:

buttonObj = obj.querySelector('input[type=image][customData]'); 

querySelector sucht die Nachkommen des gegebenen Elements für ein Element, das die Wähler übereinstimmt. Aber das Element, nach dem Sie suchen, ist dasselbe wie obj, nicht eines seiner Nachkommen.

Ihr Code funktioniert, wenn Sie den Click-Handler auf die Zelle und nicht auf die Schaltfläche setzen.

newCell.setAttribute("onclick", "CustomFunction(this);"); 

oder

newCell.addEventListener("click", function() {CustomFunction(this);}); 

Oder Sie können einfach buttonObj das Argument CustomFunction() machen, statt querySelector() zu verwenden.