2

I've got a site which includes jQuery-Tabs, so I have a hashtag in my url to get a desired tab displayed:

www.abc.de/site#tab4

On this site I have a link which looks like this:

<a href="/site.html?option=1" name="optionslink" id="optionslink" onclick="javascript:test()">LINKTEXT</a>

With this link the user can choose an option for a product. The site gets reloaded on click. I want to achieve that on click the string after the hashtag in the url is read out and then this string will be added to the url or the link...

My function looks like this:

function test() {
var info=window.location.hash;
alert(info);
document.getElementById("optionslink").href+info;
return true;
}

So far the function is on click I get an alert-popup which shows the correct hashtag and it's string. But the site gets reloaded without having the hashtag+string added. It looks like this:

www.abc.de/site.html?option=1

It should look like:

www.abc.de/site.html?option=1#tab4

How can I get this working?

profilneurotiker
  • 23
  • 6

2 Answers2

3

You are not changing the href attribute. Try

document.getElementById("optionslink").href += info;

Your code document.getElementById("optionslink").href+info; just has no effect, as there is just the concatination, but no assignment to the href attribute.

Sirko
  • 72,589
  • 19
  • 149
  • 183
  • Thx Sirko for your quick answer...I'm not really familiar with the javascript-code, I'll have to learn a lot...changing my code to your suggestion had no effect for me, but the 2nd solution of gdoron made it for me...thx again! – profilneurotiker May 24 '12 at 09:05
2

Simply change the location:

function test() {
    var info=window.location.hash;
    window.location = document.getElementById("optionslink").href + info;
    return false;
}

<a href="/site.html?option=1" name="optionslink" id="optionslink" onclick="return test();">LINKTEXT</a>

Another thing, you pass the current anchor to the function, and save the DOM query overhead:

function test(anchor) {
    var info=window.location.hash;
    window.location = anchor.href + info;
    return false;
}

<a href="/site.html?option=1" name="optionslink" 
   id="optionslink" onclick="return test(this);">LINKTEXT</a>

Note that not using inline scripts at all is the best practice with javascript events.

You should read about addEventListener, you can read about it in MDN

gdoron
  • 147,333
  • 58
  • 291
  • 367
  • if its jQuery tabs i don't think its a good idea to return something on the onclick don't you think? Especially if you test function returns false – meo May 24 '12 at 08:56
  • because return false; breaks the bubbling of the event... if an other function listens to the klick on this element, the even will not get there – meo May 24 '12 at 08:59
  • @meo. [Read my answer](http://stackoverflow.com/a/10729215/601179), specially the comment at the bottom of T.J. crowder. – gdoron May 24 '12 at 09:01
  • i know what return false does, but why would you want want to do that? preventDefault would do it, and not break any other listeners that are watching the click on this element... – meo May 24 '12 at 09:05
  • @meo. in inline script, it's the same like `preventDefault()`. did you read it carefully? – gdoron May 24 '12 at 09:06
  • hi there @ all and thx for your help! the 2nd solution of gdoron made it work. But what do you mean with the inline scripts? The part with "onclick="return test(this);"? I'm not very into javascript so far, I'll have to learn a lot... – profilneurotiker May 24 '12 at 09:07
  • @user1377035. I updated my answer with a link. please read it. but it's not that bad as it is right now. – gdoron May 24 '12 at 09:10
  • @gdoron in fact i did not read the part about inline JS... I still think that it is not very proper to return fasle on a function that actually did something that worked... i would expect it to return something positive... But beside that your solution works and your answer is fine. I will surly not downvote it or anything :) – meo May 24 '12 at 09:11