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

Question

i have a chat window which has a close button(input type='image') and onclick i want to remove the chat window from the parent node and i use this code

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

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

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 give an error cc223423432 is undefined any idea why???

i know i can always do a document.getElementByID and then remove it but please if there is anything i am missing please tell

Solution 1

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

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

Lose the attempt to create a function from a string (this is almost always the wrong thing), and just write:

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

or even just put the closeContainer functionality inline:

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

in firefox it give an error cc223423432 is undefined any idea why???

Because IE makes every element with an id (or in some cases name) a global variable (a property of window). So in IE you can get away with just saying cc223423432 and getting a reference to your object.

This is a really bad thing to rely on, though. As well as not existing in other browsers, it clutters up the global namespace with crap and will go wrong as soon as you do actually have a variable with the same name as an id on your page.

Use getElementById to get a reference to an id'd node instead, as above. This works everywhere and is unambiguous.

Solution 2

Since the parameter is not enclosed in quotes Firefox considers this as a variable with name cc223423432 which is not defined. Thats why it generates the error.

Better to pass this as a string and then use

document.getElementById ( parameter );

to get the object.

Solution 3

You need to pass that id as a string:

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

Then:

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

Solution 4

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

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

However, if you don't want the ramp-up time of learning the jquery api, it looks like you need to pass your id parameter as a string, otherwise firefox considers this a variable name (notice the additional single quotes inside the closeContainer call:

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

Solution 5

Or you could do the following

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

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

View more solutions