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

Thanks guys, i needed to know that i wasnt missing anything....i will change the code as needed — Pankaj Kumar
– Pankaj Kumar, Commented Oct 5, 2009 at 7:00

bobince · Accepted Answer · 2009-10-05 14:42:40Z

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.

rahul · Accepted Answer · 2009-10-05 06:41:01Z

3

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.

answered Oct 5, 2009 at 6:41

rahul

188k50 gold badges239 silver badges266 bronze badges

Comments

Mark Bell · Accepted Answer · 2009-10-05 06:39:42Z

2

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);
    //..........
}

answered Oct 5, 2009 at 6:39

Mark Bell

29.8k26 gold badges122 silver badges150 bronze badges

Comments

Clayton · Accepted Answer · 2009-10-05 06:43:40Z

1

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 + "');");

edited Oct 5, 2009 at 6:43

answered Oct 5, 2009 at 6:37

Clayton

6,32110 gold badges46 silver badges47 bronze badges

2 Comments

Carson Myers Over a year ago

+1, I'm new to jQuery but so far I love it -- everything is so simple and works without all the cross-browser headaches (from what I've experienced).

keif Over a year ago

As much that could be said of adopting any JavaScript framework, this kind of misses the point - that puts the OP no closer to a goal (unless it was how to do it in a framework, which is not always an option)

Deepesh Nair · Accepted Answer · 2020-02-05 11:11:48Z

1

Or you could do the following

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

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

answered Feb 5, 2020 at 11:11

Deepesh Nair

3805 silver badges7 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related