Adding javascript variable to hyperlink within script

Question

I have been trying to create a hyperlink using a variable defined earlier in the same function to append:

var NAMEVARIABLE = responseArray[i].Name;

var TITLE_Game = document.createElement("p");
TITLE_Game.className = "TITLE_Game";
TITLE_Game.innerHTML = "<a href='Game_NAMEVARIABLE.html'>Games</a>";

I have tried the following using the solution found here: Passing Javascript variable to <a href >

<a href="Game_.html" onclick="location.href=this.href+'?key='+NAMEVARIABLE;return false;">Games</a>

But that didn't work. I then tried adding an ID:

<a id="link" href="Game_.html?propid=">Games</a>

And adding this to the script: document.links["link"].href += NAMEVARIABLE;

This didn't work either. These links are occuring within Isotope, which I've run into newbie-problems making sure my JSON data is loading before the script executes. That's all working now, but I'm not sure if the reason the above methods aren't working is because of a similar issue, or if they simply are not the proper way to go about this.

Any help is much appreciated. Thank you

It seems to be working here http://jsfiddle.net/arunpjohny/8uekj/ — Arun P Johny, Jan 11 '13 at 03:23
@ArunPJohny I'm aware that it works in that situation (as it was a solution elsewhere), however it working in Isotope (or within any function) is part of this question, which your jsfiddle does not address. Thanks for testing it though. — majordomo, Jan 11 '13 at 03:59

bondythegreat · Accepted Answer · 2013-01-11T03:31:37.290

1

first of all, try debug your variable :

var NAMEVARIABLE = responseArray[i].Name;
alert(NAMEVARIABLE);

is it returning the desired return value or not. and then the second thing, in your first style of script, try this instead :

TITLE_Game.innerHTML = "<a href='Game_"+NAMEVARIABLE+".html'>Games</a>";

I assumed you have (static) html collection with game_[number_id].html format and if it's so, you can try further with your second style of script, and change it to this :

<a href="#" onclick="location.href='Game_'+NAMEVARIABLE+'.html';return false;">Games</a>

you need to learn further about javascript strings concatenation

edited Jan 11 '13 at 03:31

answered Jan 11 '13 at 03:22

bondythegreat

1,379
11
18

1

you certainly are - thanks for your help! I should have stated that I knew the variable was working correctly (outside the . But your first suggestion worked. And thanks for your link, I'll read up for sure. Again, thanks for your help. – majordomo Jan 11 '13 at 05:29

score 0 · Answer 2 · answered Jan 11 '13 at 03:21

0

Use string concatenation to build up your inner html string.

Example:

var nameVariable = 'Foo';
var innerHtmlText = nameVariable + 'bar'; 

$('#someElement').html(innerHtmlText);

The contents of someElement will then contain the text: 'Foobar';

answered Jan 11 '13 at 03:21

aztechy

640
7
15

Rohit416 · Answer 3 · 2015-10-03T20:01:57.330

This can be achieved by either (i.e. pure JS or jQuery) ways without much hassle. Suppose you have this <a> element with some href

<a id="Link" href="/collection/categories/">Games</a>

Pure JavaScript way:

window.onload = function() {
  var link= document.getElementById('Link'),
  url = link.href + responseArray[i].Name + '.html';

  link.setAttribute('href', url);
}

Using Jquery:

$(function(){
  var link= $('#Link'),
  url = link.attr('href') + responseArray[i].Name + '.html';

  link.attr('href', url);
});

score 0 · Answer 4 · answered Jan 11 '13 at 03:56

You just need string concatenation. modify link's href onclick would be considered as spam in most modern browser.

<div id="result">
  the result: 
</div>
<script type="text/javascript">
var name = "foo_bar";
var url = "page.html?key=" + name; //or.. "page_" + name + ".html";
var link = '<a href="' + url +'">link here</a>';

$("#result").addClass("g_title");
$("#result").append(link);
</script>

Adding javascript variable to hyperlink within script

4 Answers4