javascript - Can't get the id name using onClick? - Stack Overflow

admin管理员组

文章数量:1348065

.html

What I'm trying to do is append the id name into my url, but I'm getting "#undefined" instead?

The script I'm using:

function generateUrl()
{
    var currentId = $(this).attr('id');
    document.location.hash = currentId;
    console.log($(this));
}

inside the html:

<a id="abc" onClick="generateUrl()" >this is an anchor btn</a>

http://wthdesign/test/test.html

What I'm trying to do is append the id name into my url, but I'm getting "#undefined" instead?

The script I'm using:

function generateUrl()
{
    var currentId = $(this).attr('id');
    document.location.hash = currentId;
    console.log($(this));
}

inside the html:

<a id="abc" onClick="generateUrl()" >this is an anchor btn</a>

• javascript
• url
• onclick
• undefined

Share Improve this question Follow asked Apr 9, 2013 at 2:35 Vincent ChuaVincent Chua 1,00766 gold badges2121 silver badges4141 bronze badges 3

• What do you get from the console log? – Black Maggie Commented Apr 9, 2013 at 2:37
• i got this: [Window, jquery: "1.9.1", constructor: function, init: function, selector: "", size: function…] – Vincent Chua Commented Apr 9, 2013 at 2:39
• 2 You can change your link to <a href="#abc">this is an anchor btn</a> and will achieve the same. – Ilia Frenkel Commented Apr 9, 2013 at 2:40

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

<a id="abc" onClick="generateUrl(this)" >this is an anchor btn</a>


function generateUrl(elem)
{
    var currentId = elem.id;
    document.location.hash = currentId;

}

You pass the element to your function with "this"

If you debug, you'll find that this in this context is the window object. You can pass this into the function like so:

function generateUrl(el)
{
    var currentId = $(el).attr('id');
    document.location.hash = currentId;
}

<a id="abc" onClick="generateUrl(this)" >this is an anchor btn</a>

Alternatively, you can use jquery to replace your inline onClick like so:

$("#abc").click(function()
{
    var currentId = $(this).attr('id');
    document.location.hash = currentId;
}

That's because setting onclick HTML attribute is equivalent to set an anonymous function like this:

element.onclick = function(event) {
    generateUrl();
}

As you can see, in your call you lost both event object and this contextual object, that bees the global ones (window for the browsers).

Then you have several approach. First, don't use the HTML attribute, but set the click by JS instead, that is a better practice – avoid spaghetti code, when it's possible.

You're using jQuery, therefore:

$(function() {
    $("#abc").click(generateUrl);
});

Plus, your function can be simplified:

function generateUrl() {
    window.location.hash = this.id;
}

So your HTML will be just:

<a id="abc">this is an anchor btn</a>

If, for any reason, you can't / don't want remove the onclick from the HTML, you have to modify it a bit:

<a id="abc" onClick="generateUrl.call(this)" >this is an anchor btn</a>

In that way you're calling the function passing the right contextual object. Just as future reference, you could also pass the event as first argument:

<a id="abc" onClick="generateUrl.call(this, event)" >this is an anchor btn</a>

P.S. Notice that without an href attribute in your a tag, the browser won't threat that tag as a "link".

本文标签： javascriptCan39t get the id name using onClickStack Overflow