在 html <a> 上使用 javascript 变量

Using javascript variable on html <a>

提问by Adyana Permatasari

I have this javascript code:

我有这个 javascript 代码：

<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

我想在标签上使用 pathArray 变量作为我的 href 的一部分

This is my html code

这是我的 html 代码

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

但它似乎不会读取变量的值，而是读取它的名称。

回答by tchow002

You're mixing your javascript into your HTML.

您正在将您的 javascript 混合到您的 HTML 中。

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

我相信您的 pathArray 变量也不会包含您所期望的。

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:

并为您的锚点添加一个 id：

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

The javascript will get all GETparameters from the current url and then replace the hrefattribute in the element with an id of gameAnchorwith your game.html concatenated with the GETparameters in the url.

javascript 将从GET当前 url 中获取所有参数，然后用hrefid替换元素中的属性，并将gameAnchor您的 game.html 与GETurl 中的参数连接起来。

回答by Akhil Sekharan

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.

您不能在 html 中的任何位置放置 javascript 变量。相反，您需要通过脚本获取 dom 元素并附加 href 属性。给你的锚一个 id 或类名，然后试试这个作为例子。

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

回答by Yuriy Galanter

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

为此，您还必须使用 JavaScript。首先给你的主播一个ID：

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

<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:

然后将以下内容添加到您的 JavaScript 代码中：

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

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

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

该代码会将字符串变量的内容添加到锚元素的 href 属性中。

回答by Ken

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)

<a href="#" id="pathLink"></a>（这是假设您的页面上有多个锚点）

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:

锚标签有一个原生的 href 属性，所以分配新的就像这样简单：

Rewrite:

改写：

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

回答by Samer

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

它不会那样工作。您将不得不使用 JavaScript 遍历您需要的锚点。

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

这个没有经过测试。我假设您希望这种情况发生在多个锚链接上。

HTML:

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');

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

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

回答by madjaoue

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, setand removeit.

您可以访问 HTML 中元素的属性。虽然它不是真正的 HTML 变量，但大致接近于它。正如您对变量所期望的那样，您可以get，set并且remove它。

Element.getAttribute():

元素.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

getAttribute() 返回元素上指定属性的值。如果给定的属性不存在，则返回的值将为 null 或 ""（空字符串）；详情见注释：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()

元素.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()

Element.removeAttribute()

Blockquote

块引用

removeAttribute removes an attribute from the specified element.

removeAttribute 从指定的元素中删除一个属性。

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

注意：话虽如此，您将需要 javascript 才能与属性进行交互。这部分解释了为什么它不是“适当的变量”。

回答by netalex

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.

考虑使用一些模板引擎作为 undescore、mustache 或 doT.js。您可以轻松地将 html 标识符或部分替换为模板的数据变量。