Question

我正在尝试创建代码，因此当您按下按钮时，链接将会更改。这是HTML代码：

<div id="body">
<div class="mainbody">
<p id="para"></p>
<h1>Here is my next Javascript Example</h1><br />
<p id="link1"><a href="index.html" title="Portfolio main" target="_blank">Portfolio Main</a></p>
<input type="button" value="Change Link" id="bttn2" onClick="changeLink();" />    
</div>

以下是Javascript代码：

// JavaScript Document
function changeLink()
    {
    document.getElementById("link1").innerHTML="Paramore";
    document.getElementById("link1").href="http://www.paramore.com";
    document.getElementById("link1").target="_blank";
    }

我的问题是，当我按下按钮时，链接会发生变化，但显示“Paramore”的单词实际上并不是链接。

Answer 1

链接发生变化，但出现'Paramore'的单词实际上并不是链接。

那是因为你已经用静态文本Paramore替换了链接，因为通过设置段落的文本，你已经删除了链接。

如果您将id="link1"元素从p元素移动到a元素，则会对其进行排序。

或者，执行此操作：

var anchor = document.getElementById("link1").getElementsByTagName('a')[0];
anchor.innerHTML="Paramore";
anchor.href="http://www.paramore.com";
anchor.target="_blank";

但我不得不说，在点击上更改锚点非常狡猾。

Answer 2

ID必须位于<a>元素上。不是<p>元素。试试这个：

<div id="body">
<div class="mainbody">
<p id="para"></p>
<h1>Here is my next Javascript Example</h1><br />
<p ><a id="link1" href="index.html" title="Portfolio main" target="_blank">Portfolio Main</a></p>
<input type="button" value="Change Link" id="bttn2" onClick="changeLink();" />    
</div>

与此相同：http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_elmnt_innerhtml

Answer 3

document.getElementById（“link1”）会为您提供段落＆lt; p＆gt; 元素，您想要的是锚点＆lt; a＆gt; 元素。我建议您将属性 id =“link1”改为吗？

Answer 4

[1] id =“link1”应该在锚标记中而不是段落标记

[2]对javascript DOM对象使用.setAttribute方法

obj = document.getElementById("link1");
obj.setAttribute("href","http://www.paramore.com");
obj.setAttribute("target","_blank");

使用Javascript按一个按钮更改链接

4 个答案: