javascript - 通过使用 Javascript 按下按钮来更改链接

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") 将为您提供段落 <p>元素，您想要的是锚 <a>元素。我可以建议你把属性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");