Using javascript variable on html <a>

Question

I have this javascript code:

<script ="text/javascript">
    var newUrl=window.location.href;
    var pathArray="";
    pathArray=newUrl.substr(newUrl.lastIndexOf("?")+1);
</script>

I want to use the pathArray variable as a part of my href on the tag

This is my html code

<a href="game.html?"+pathArray>
  <img src="img/RestartButton.png" style="position:absolute;
  left:80px; top:220px">
</a>

but it seems like it doesn't read the value if the variable, but the name of it instead.

Sorry, but you can't just dump the name of a Javascript variable anywhere in your HTML markup and expect it to work. — Lightness Races in Orbit
– Lightness Races in Orbit, Commented Jul 27, 2013 at 5:39
Wouldn't the pathArray variable will be a global variable, because it's on the HTML file? — Adyana Permatasari
– Adyana Permatasari, Commented Jul 27, 2013 at 5:48
HTML and Javascript are two different things... HTML doesn't have variables. It certainly doesn't have Javascript's. HTML also doesn't have an + operator for arguments. It's a markup language, not a programming language. — Lightness Races in Orbit
– Lightness Races in Orbit, Commented Jul 27, 2013 at 5:59

tchow002 · Accepted Answer · 2013-07-27 05:50:38Z

9

You're mixing your javascript into your HTML.

I believe your pathArray variable will also not contain what you are expecting.

Try this in your script tag:

var gamePath = "game.html?" + window.location.search.replace( "?", "" );
document.getElementById("gameAnchor").setAttribute("href", gamePath);

And add an id to your anchor:

<a href="#" id='gameAnchor'>

The javascript will get all GET parameters from the current url and then replace the href attribute in the element with an id of gameAnchor with your game.html concatenated with the GET parameters in the url.

answered Jul 27, 2013 at 5:50

tchow002

1,0986 silver badges9 bronze badges

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

Comments

Comfortably Numb · Accepted Answer · 2013-07-27 05:45:49Z

1

You will have to use JavaScript for this as well. First give your anchor an ID:

<a id="myLink" href="game.html?"><img src="img/RestartButton.png" style="position:absolute; left:80px; top:220px"></a>

And then add following to your JavaScript code:

document.getElementById('myLink').href += pathArray;

The code will add the content of your string variable to href property of anchor element.

answered Jul 27, 2013 at 5:45

Comfortably Numb

39.9k17 gold badges82 silver badges147 bronze badges

Comments

Ken · Accepted Answer · 2013-07-27 05:46:10Z

1

First, make the anchor easier to select by giving it an identifier.

<a href="#" id="pathLink"></a> (This is assuming there is more than one anchor on your page)

Then, in your script above include:

var anchor = document.getElementById("pathLink");

The anchor tag has a native href property, so assigning the new one is as easy as this:

Rewrite:

var anchor = document.getElementById("pathLink").href += pathArray;

answered Jul 27, 2013 at 5:46

Ken

5486 silver badges19 bronze badges

Comments

Samer · Accepted Answer · 2013-07-27 05:47:42Z

1

It won't work like that. You will have to loop through the anchors your need using JavaScript.

This hasn't been tested. I'm assuming you want this to happen to more than one anchor link.

HTML:

<a class="updatethis" href="game.html">...</a>
<a href="not-game.html">...</a>
<a class="udpatethis" href="game.html">...</a>

JavaScript: var anchors = document.getElementsByTagName('a');

for (var i = 0, a; a = anchors[i++]; ) {
    if (a.className === 'updatethis') {
        a.href += window.location.search;
    }
}

answered Jul 27, 2013 at 5:47

Samer

9881 gold badge6 silver badges16 bronze badges

Comments

Akhil Sekharan · Accepted Answer · 2013-07-27 05:57:51Z

1

You can't place a javascript variable anywhere in html. Instead you need to get the dom element through script and append the href attribute. give your anchor an id or classname and try this as an example.

<a id="myLink" href="game.html">
    <img src="img/RestartButton.png" style="position:absolute;left:80px; top:220px">
</a>

<script type="text/javascript">;
    document.getElementById('myLink').href += window.location.search
</script>

edited Jul 27, 2013 at 5:57

answered Jul 27, 2013 at 5:42

Akhil Sekharan

12.7k8 gold badges43 silver badges58 bronze badges

2 Comments

Lightness Races in Orbit Over a year ago

Instead of dumping code on the OP, why not explain the solution?

Adyana Permatasari Over a year ago

I've tried that, but it keeps giving me this error: Uncaught TypeError: Cannot read property 'href' of null at file:///android_asset/www/lose.html?level1:8

madjaoue · Accepted Answer · 2018-07-17 16:00:34Z

You can access an attribute of an element in HTML. Although it's not really an HTML variable, it's roughly close to it. As you expect from a variable, you can get, set and remove it.

Element.getAttribute() :

getAttribute() returns the value of a specified attribute on the element. If the given attribute does not exist, the value returned will either be null or "" (the empty string); see Notes for details : https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute

Example :

let myDiv = document.getElementById("myDiv");
console.log(myDiv.getAttribute("variable"))

 <div class="div" id="myDiv" variable='test'</div>

Of course, you can set, or remove an attribute too :

Element.setAttribute()

Sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value.

Element.removeAttribute()

Blockquote

removeAttribute removes an attribute from the specified element.

Note: This being said, you will need javascript to interact with attributes. And that explains partially why it's not a "proper variable".

netalex · Accepted Answer · 2014-02-20 18:29:40Z

-1

Think of using some template engine as undescore, moustache or doT.js. you can easily substitute html identifier or part of with template's data variables.

answered Feb 20, 2014 at 18:29

netalex

4575 silver badges16 bronze badges

Collectives™ on Stack Overflow

Using javascript variable on html <a>

7 Answers 7

Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related