.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

• 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

3 Answers 3

<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".