如何从 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 foo(){

  getHref = document.getElementById("name").value;

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

}