如何从 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 = () => {&nbsp;&nbsp; &nbsp; anchor.href = input.value;&nbsp;};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(){&nbsp; getHref = document.getElementById("name").value;&nbsp; document.getElementById("anchor").href = "https://"+getHref;}