Какова причина этой ошибки, которую я получаю?

Question

Я использую 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"));
};

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(),