如何在 HTML 中将文本输入值添加到 URL 的末尾？答案

【问题标题】：How to add the text input value to the end of the URL in HTML?如何在 HTML 中将文本输入值添加到 URL 的末尾？
【发布时间】：2015-12-08 06:21:22
【问题描述】：

我是 HTML 新手；我需要将文本输入中的数字附加到 url 的末尾。我该怎么做？

<input type=\"number\" id=\"b\" name=\"b\" value=\"1\">\
<script>
  var str,i;
  i= parseInt(b.value);
  str+="<a href=/t"+i+">Send</a>";
</script>

当我尝试使用上面的示例代码时，单击发送时它总是发送b 的初始值，即“1”。即使我更改了b 的值并尝试发送它，它发送的初始值也是相同的。

谁能帮我解决这个问题？

【问题讨论】：

你为什么要用``字符转义引号？

标签： javascript html url

【解决方案1】：

试试这个

<input type="number" id="b" name="b" value="1">
<a id="c" href="">Send</a>

<script>
  document.getElementById("c").addEventListener("click", function() {
    var i = document.getElementById("b").value;
    this.setAttribute("href", "/t" + i);
  });
</script>

【讨论】：

【解决方案2】：

您的代码的问题在于它在页面加载时写入了“数字”框的初始值。您想要的快速版本是：

<input type="number" id="b" name="b" value="1" onchange="link1.href='t/'+parseInt(b.value);">
<a id="link1" href="">Send</a>

此代码适用于最新版本的 Chrome、Firefox 和 Internet Explorer。您可能希望使用 jQuery 或 document.getElementById 来进行页面元素引用。

【讨论】：

【解决方案3】：

您可以使用 id 搜索元素

var el = document.getElementById("b")

使用.value访问其值

var val =el.value

并使用window.location将其设置为url

var url = window.location.href; // this will return current url
url += "?key=" + val;
window.location.href=url;

您没有获得更新值的另一个原因是您在页面加载时调用了您的脚本。您必须在活动中更新它。寻找blur事件，或者你可以有一个按钮，点击事件，计算url并路由到它。

【讨论】：