如何从 TextBox 获取文本并将其放入 HTML 的锚标记中

Question

我正在处理一个网页，我必须从 TextBox 获取文本，然后将其放入这样的锚标记中

<a href="value here">

我尝试了这个解决方案，但它只适用于按钮单击，我无法在 href="here" 之间设置值

HTML：

<input type="text" id="name" name="name">
<button onclick="myFunction()" name="btnView">View</button>
<a href="http://urlhere/valueFromTextbox">Name</a>

Javascript：

function myFunction() {
var test = document.getElementById("name").value;
document.getElementById("demo").innerHTML = test;
}

请帮忙。 谢谢

Answer 1

您可以在输入字段上侦听输入或更改事件，并在处理程序中设置锚点的 href 属性。

例如：

 const input = document.getElementById('name'); const anchor = document.getElementsByTagName('a')[0]; input.oninput = () => { anchor.href = input.value; };

 Enter href: <input id="name"> <a href="">Click here</a>

Answer 2

您正在做的是设置错误的 innerHTML。 锚标签“href”是一个属性。 您必须将其设置为属性，而不是 innerHTML。 试试这个。

var test = document.getElementById("name").value;
document.getElementsByTagName("a")[0].setAttribute("href", text);

Answer 3

试试这个它可能很有用：

对于 html：

<input type="text" id="name" name="name">
<a id="anchor" href="">Link</a>
<button type="button" onclick="foo();">Change link</button>

javascript function：

function foo(){
  getHref = document.getElementById("name").value;

  document.getElementById("anchor").href = "https://"+getHref;

}

Answer 4

Href 是一个属性，如果要更改它，则需要使用 attr() 更改属性。 创建一个侦听器以在文本框输入并更改 href 属性时触发