使用Javascript按下按钮更改链接

Changing a Link by pressing a button using Javascript

本文关键字：链接 按钮 Javascript 使用      更新时间：2023-09-26

我正在尝试创建代码，以便当您按下按钮时，链接将发生变化。下面是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"实际上并不是一个链接。

链接改变了，但是出现的单词"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";

但是我不得不说，在点击时改变锚点是很危险的。

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

[2]为javascript DOM对象使用。setattribute方法

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

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

document.getElementById("link1")将为您提供段落<>元素，您需要的是锚元素。我是否建议您将属性id="link1"放在上?

相关文章：