我收到此错误的原因是什么？

Question

我正在使用 JavaScript 用内容填充 HTML 页面。其中一条内容是 button/link。内容是动态生成的，当用户按下按钮时，我将需要获取一些已嵌入（作为属性）在按钮本身中的信息。

通用代码如下：

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

当我进入函数（通过按下按钮）时，浏览器会抛出一个错误 cannot getAttribute of null object。

但是如果我去掉 button.src.

似乎就可以了

我已经找到了解决方法，但我想知道是什么原因导致了这个问题？

编辑：这是实际代码：

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

问题出在这一行：

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

querySelector 在给定元素的后代中搜索与选择器匹配的元素。但是您要查找的元素与 obj 相同，不是它的后代之一。

如果您将点击处理程序放在单元格而不是按钮上，您的代码将起作用。

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

或

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

或者您可以简单地将 buttonObj 作为 CustomFunction() 的参数，而不是使用 querySelector().

我收到此错误的原因是什么？

What is the cause of this error I was getting?

html

javascript

dom

getattribute