将单个变量传递给html中的href

Question

<div class="d-flex align-items-center">
<div class="container-fluid" style="float: right;">
<form class="d-flex">
<input type="text" placeholder="Search" aria-label="Search" style="width: 400px;" id="searchTerm" name="searchTerm" ></input>
<script>
var inputVal = document.getElementById("searchTerm").value;
</script>
<a href="/articles/search" class="btn btn-success" onclick="location.href=this.href+'?term='+inputVal;" style="width: 100px;">Search</a>

</form>
</div>
</div>

我试图将值从输入传递到新页面，然后在下一页检索该变量。我不确定我是否正确地传递了它，也不确定一旦它被发送到下一页如何检索它。

Answer 1

您可以使用"change"事件侦听器:

let inputElement = document.querySelector("#searchTerm");
inputElement.addEventListener("change", ()=>{
let inputVal = document.getElementById("searchTerm").value;
let anchorElement = document.querySelector(".d-flex > a");
anchorElement.href = `/articles/search/${inputVal}`;
});