Как передать элемент HTML в качестве аргумента функции Javascript?

Question

У меня есть окно чата с кнопкой закрытия (input type='image'), и я хочу удалить окно чата из родительского узла, и я использую этот код

closeBtn.setAttribute("onclick", "return closeContainer(cc" + friendId + ");");

обратите внимание, что эта кнопка создается с помощью javascipt и cc223423432 (скажем) будет идентификатором окна чата

вот мой код, чтобы удалить его

function closeContainer(ccId) {
    var x = ccId;
    x.parentNode.removeChild(x);
    //..........
}

теперь в IE8 и Chrome он находит переданный аргумент как HTMLDIV и работает нормально, но в Firefox он выдает ошибку. cc223423432 не определен.

я знаю, что всегда могу сделать document.getElementByID и затем удалить его, но, пожалуйста, если есть что-то, чего мне не хватает, пожалуйста, сообщите

Answer 1

closeBtn.setAttribute("onclick", "return closeContainer(cc" + friendId + ");");

Не используйте setAttribute для установки обработчиков событий... на самом деле вообще не используйте setAttribute в HTML-документе. В IE6-7 есть ошибки, влияющие на многие атрибуты, включая обработчики событий. Вместо этого всегда используйте свойства прямого атрибута 'DOM Level 2 HTML'; они надежны и облегчают чтение вашего кода.

Потеряйте попытку создать функцию из строки (это почти всегда неправильно) и просто напишите:

closeBtn.onclick= function() {
    return closeContainer(document.getElementById('cc'+friendId));
};

или даже просто включите функцию closeContainer:

closeBtn.onclick= function() {
    var el= document.getElementById('cc'+friendId);
    el.parentNode.removeChild(el);
    return false;
};

в firefox выдает ошибку cc223423432 не определена какая-либо идея почему???

Потому что IE делает каждый элемент с id (или в некоторых случаях name) глобальная переменная (свойство window). Так что в IE вы можете просто сказать cc223423432 и получить ссылку на ваш объект.

Это действительно плохая вещь, на которую можно положиться. Как и не существует в других браузерах, он загромождает глобальное пространство имен дерьмом и пойдет не так, как только у вас действительно будет переменная с тем же именем, что и id на твоей странице.

Используйте getElementById, чтобы получить ссылку на узел id'd, как указано выше. Это работает везде и однозначно.

Answer 2

Поскольку параметр не заключен в кавычки, Firefox рассматривает это как переменную с именем cc223423432, которая не определена. Вот почему он генерирует ошибку.

Лучше передать это как строку, а затем использовать

document.getElementById ( parameter );

чтобы получить объект.

Answer 3

Вам нужно передать этот идентификатор в виде строки:

closeBtn.setAttribute("onclick", "return closeContainer('cc" + friendId + "');");

Затем:

function closeContainer(ccId) {
    var x = document.getElementById(ccId);
    x.parentNode.removeChild(x);
    //..........
}

Answer 4

Или вы могли бы сделать следующее

function handler(elementRef) {
  console.log(elementRef);
}

<button onclick="handler(this)">Click Me!</button>

Answer 5

JQuery будет работать во всех этих браузерах. Я бы сделал следующее:

closeBtn.click(function(){
    ('#cc' + friendId ).remove();
});

Однако, если вы не хотите, чтобы время изучения API-интерфейса jquery увеличивалось, похоже, вам нужно передать параметр id в виде строки, в противном случае firefox считает это именем переменной (обратите внимание на дополнительные одинарные кавычки внутри вызова closeContainer:

closeBtn.setAttribute("onclick", "return closeContainer('cc" + friendId + "');");