JavaScript isn't executing onclick event

Question

I have some simple JavaScript functions:

function focus(id)
{
    var e = document.getElementById(id);
    if (e != null)
    {
        e.focus();
    }
}

function show(id)
{
    var e = document.getElementById(id);
    if (e != null)
    {
        e.style.display = "inline";
    }
}

I then have an html <a> tag with an onclick event:

<a title="Click This" onclick="focus('some_textbox'); show('some_panel');">Click This</a>

When I click on the "Click This" link, only the show() method executes. From some reason the focus method is never called. Any ideas why this is happening?

I've tried clearing my cache and have reversed the order of the focus() and show() methods. I've also verified that everything is spelled correctly.

Is it because focus() is already a function within JavaScript?

Edit: I tried renaming the function to focus2 and it seems to work now. Very strange. Anybody have any insight into why this happens?

If show is executed, focus is as well, maybe you cannot see the effect, maybe it is not the function you defined, but it is executed. — Felix Kling
– Felix Kling, Commented Dec 30, 2011 at 23:01
@FelixKling: Its not executed. And thanks for completely ignoring my post. — Mark
– Mark, Commented Dec 30, 2011 at 23:06
@HBellamy: I tried renaming, shortly after I posted, to focus2 and it seems to work. Very strange. — Mark
– Mark, Commented Dec 30, 2011 at 23:07
show is called after focus. Do you think the interpreted just skips a statement? And if focus would throw an error or not exist, show wouldn't be executed. Edit: Regarding your last comment, that means that the focus function you called was not the one you defined (and that's actually what I meant). Some engines don't let you override certain global properties. — Felix Kling
– Felix Kling, Commented Dec 30, 2011 at 23:08

Pointy · Accepted Answer · 2011-12-30 23:01:34Z

4

It probably is calling the "focus" method, but what's happening is that the default action of the <a> tag is stealing it back. Try this:

function focus(id)
{
    var e = document.getElementById(id);
    if (e != null)
    {
       setTimeout(function() { e.focus(); }, 1);
    }
}

By running the call to "focus" in a separate event loop, you can make sure that your element grabs the focus after the handling of the "click" is done.

answered Dec 30, 2011 at 23:01

Pointy

415k62 gold badges600 silver badges631 bronze badges

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

Comments

H Bellamy · Accepted Answer · 2011-12-30 23:10:22Z

0

Seems like you have a renaming issue here.

Just rename the function focus to focusX or something different, this works for me in my test case.

Remember to update the call to focus in the href, to focusX

answered Dec 30, 2011 at 23:10

H Bellamy

22.8k27 gold badges81 silver badges119 bronze badges

1 Comment

Mark Over a year ago

Will mark as correct when the timer expires. Any ideas for a new name; emphasize, snap cursor? I can't think of a good one.

Collectives™ on Stack Overflow

JavaScript isn't executing onclick event

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related