最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

Using javascript variable on html <a> - Stack Overflow

programmeradmin3浏览0评论

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.

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.

Share Improve this question edited Jul 27, 2013 at 5:54 Ruchira Gayan Ranaweera 35.6k17 gold badges78 silver badges117 bronze badges asked Jul 27, 2013 at 5:34 Adyana PermatasariAdyana Permatasari 1573 gold badges5 silver badges13 bronze badges 3
  • 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 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 Commented Jul 27, 2013 at 5:48
  • 1 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 Commented Jul 27, 2013 at 5:59
Add a comment  | 

7 Answers 7

Reset to default 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.

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.

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;

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;
    }
}

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>

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

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.

发布评论

评论列表(0)

  1. 暂无评论