將輸入字符串附加到錨點標記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