Clever Geek Handbook

How do I pass an HTML element as an argument to a Javascript function?

I have a chat window that has a close button (input type = 'image') and an onclick. I want to remove the chat box from the parent node and I am using this code

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

note that this button is created via javascipt and cc223423432 (say) will be the chat window id

here is my code to remove it

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

now in IE8 and Chrome it finds the passed argument as HTMLDIV and works fine, but in firefox it gives error cc223423432 undefined any idea why ???

I know I can always do document.getElementByID and then remove it, but please, if there is anything I am missing, please say

+2


source to share


4 answers


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

Don't use setAttribute to set event handlers ... actually don't use setAttribute in an HTML document at all. IE6-7 has bugs affecting many attributes, including event handlers. Instead, always use the DOM Level 2 HTML direct quality attribute properties; they are reliable and make your code easier to read.

Get lost trying to create a function from a string (this is almost always wrong) and just write:

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

or even just add the closeContainer function to the line:



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

in firefox it gives error cc223423432 undefined any idea why ???

Because IE makes every element with id

(or in some cases name

) a global variable (property window

). So in IE you can just say cc223423432

and get a reference to your object.

It's too bad to rely on. Just like not existing in other browsers, it clutters up the global namespace with shit and fails as soon as you actually have a variable with the same name as id

in your page.

Use getElementById to get a reference to the id'd node as above. It works all over the place and in no uncertain terms.

+3


source


Because the parameter is not quoted, Firefox treats it as a variable named cc223423432, which is undefined. This is why it generates an error.

Better to pass this as a string and then use



document.getElementById ( parameter );

to get the object.

+3


source


You need to pass this identifier as a string:

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

Then:

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


source


jquery will work in all of these browsers. I would do the following:

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

However, if you dont need the jquery api learning ramp-up time, it looks like you need to pass your id parameter as a string, otherwise firefox will consider that variable name (note the extra single quotes inside the closeContainer call:

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


source






More articles:


All Articles