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

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

我希望这是你想要的。

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

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