Question

尝试使用vanilla js将用户输入的字符串附加到锚标记href。

<script>
    function searchProduct(){
    var inputId = document.getElementById('inputId').value;
    document.getElementById('go').href = "mywebsite/product/" + inputId;
}
    searchProduct();
</script>


<a id="go"><p>Go</p></a>

但是，这不起作用

Answer 1

当页面加载时，您将触发searchProduct()一次。您需要在ID inputId的输入更新后触发此操作 - 无论是通过按下按钮还是离开文本框，还是其他内容。

以下示例在离开文本框时触发searchProduct()函数：

(function() {
  function searchProduct(){
    var inputId = document.getElementById('inputId').value;
    document.getElementById('go').href = "mywebsite/product/" + inputId;
  }

  document.getElementById('inputId').addEventListener('blur', function() {
    searchProduct()
  });
})();

请参阅this jsBin

Answer 2

您应该在自身之外执行该功能，而不是在

之内

function searchProduct(){
    var inputId = document.getElementById('inputId').val();
    document.getElementById('go').href = "mywebsite/product/" + inputId;    
}

searchProduct(); // This should be executed via an eventListener to the input

Answer 3

我希望这就是你想要的。

＆＃13;

  function searchProduct(){
    var inputValue = document.getElementById('inputId').value;
    document.getElementById('go').href =  "mywebsite/product/"+inputValue;
    }

＆＃13;

	<input id="inputId" type="text">
	<a id="go" onclick="searchProduct();" href="">anchor tag</a>

＆＃13;

将输入字符串附加到锚标记href

3 个答案: