Can't insert a function to a element on onclick event (JS)

Question

I have problem with this code:

    var xButton = document.createElement("a");
    xButton.className = "cXButton";
    xButton.href = "#";
    xButton.onclick = "closePanel()";
    xButton.innerHTML = "X";

While "closePanel()" is a function I already wrote. I used Firebug and found out that "onclick" attribute doesn't appear in a tag. I saw some threads where instead of the name of the function there is it's implementation (function closePanel(){...}). This is not what I'm looking for.

Any suggestions how to solve it?

You can try attaching an event using a listener. An example is shown here: stackoverflow.com/questions/11720141/… — KernelPanik
– KernelPanik, Commented Apr 22, 2013 at 15:43

Bojangles · Accepted Answer · 2013-04-22 15:40:51Z

6

Your have two problems in your original code:

"closePanel()" is a string.
closePanel() attempts to (or would if it wasn't a string) call the function and assign it's output to xButton.onclick

It should be this instead:

xButton.onClick = closePanel;

This will assign a reference to the function closePanel() to xButton.onClick, calling closePanel() when the xButton.onClick event is triggered.

Remember you can use this inside the declaration of closePanel() to reference the clicked element.

answered Apr 22, 2013 at 15:40

Bojangles

102k50 gold badges175 silver badges209 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2004403 Over a year ago

It works, though it onClick attribute doesn't appear in Firebug.

Collectives™ on Stack Overflow

Can't insert a function to a element on onclick event (JS)

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related