我得到这个错误的原因是什么？答案

【问题标题】：What is the cause of this error I was getting?我得到这个错误的原因是什么？
【发布时间】：2016-08-05 00:14:42
【问题描述】：

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

这是通用代码：

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

【问题讨论】：

我将从打印参数开始。所以，函数的第一行说：console.log(arguments); 看看有什么可用的。
var data = obj.getAttribute("customData")); 这行语法不正确。
您的代码works fine在语法错误被修复并且示例完成后。如果我们要解释出了什么问题，您需要发布一个实际的工作示例，包括哪些实现会产生这种行为。
顺便说一句，您不应该创建这样的自定义属性。使用标准的data-XXX 属性。
@JaromandaX 确实，这不是他的问题的解决方案。这就是为什么我把它放在评论中，而不是答案。

标签： javascript html dom getattribute

【解决方案1】：

问题出在这一行：

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

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

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

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

或

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

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

【讨论】：