I'm having trouble getting an onclick attribute to run a JavaScript function

Question

I'm trying to trigger a function by clicking on a link, but this is not working.

This works on a <button> or a <p> tag or anything else but not on a link.

<a href="#" onclick="search()">click me</a>
<button onclick="search()">clickity</button>

JavaScript function:

function search()
{
    alert("hello");
    return false;
}

Where in the page is that JS? Is it nested inside any other JS? — loganfsmyth
– loganfsmyth, Commented Jun 17, 2013 at 15:34

user2437417 · Accepted Answer · 2013-06-17 15:35:47Z

2

It's because a links have a property named .search, which isn't a function.

When you assign an inline handler, the properties of the element become accessible as variables, and so the .search property/variable is shadowing the global search() function.

Just change the name, and it'll work.

<a href="#" onclick="mysearch()">click me</a>

function mysearch() {
    alert("hello");
    return false;
}

Or you could just access the global function directly from the window object.

<a href="#" onclick="window.search()">click me</a>

It works on the button because buttons don't have that property.

answered Jun 17, 2013 at 15:35

user2437417

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

2 Comments

Felix Kling Over a year ago

Docs: developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement. That properties of elements are added to the scope of inline event handlers is one of the most confusing things IMO.

user2437417 Over a year ago

@FelixKling: Yep, it's all the confusion of the with statement, and without any visible syntax to let you know it's happening.

Collectives™ on Stack Overflow

I'm having trouble getting an onclick attribute to run a JavaScript function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related