Question

所以我一直在努力寻找一种方法来实现这一目的，

如果某人键入：“输入”->按钮的链接变为exemple.com/input

这是我的html

<div class="search-box">
    <form method="get" id="search-index-form" name="myForm" class="clear-block" role="search">
        <input id="userInput" placeholder="Search">
        <button type="submit" id="mylink" href="http://www.exemple.com/" onclick="othername(); changeLink();"><span>search</span></button>
    </form>
</div>

还有我的JavaScript

function othername() {
    var input = document.getElementById("userInput");
}

function changeLink() {
    var link = document.getElementById("mylink");
}
link.setAttribute('href', link + input);

非常感谢您的帮助

Answer 1

您只需要一个函数changeLink即可获得所需的结果，并且还可以使用baseHref变量通过Element.getAttribute()方法存储基本href。

在触发changeLink事件时，您可以调用blur。然后，使用baseHref并将其与从输入元素的value property中检索到的button的值相连。

let baseHref = document.getElementById("mylink").getAttribute('href');

function changeLink() {
  var input = document.getElementById("userInput");
  var link = document.getElementById("mylink");
  link.setAttribute('href', baseHref + input.value);
  
  console.log('Now the link is: ' + link.getAttribute('href'));
}

<div class="search-box">
  <form method="get" id="search-index-form" name="myForm" class="clear-block" role="search">
    <input id="userInput" placeholder="Search" onblur='changeLink();'>
    
    <button type="submit" id="mylink" href="http://www.exemple.com/">
    
    <span>search</span></button>
  </form>
</div>

Answer 2

您可以通过使用窗口对象来更改URL，例如：

window.location.href = url + '/' + input

或者您可以在此链接（javascript位置）上查看

https://www.w3schools.com/jsref/obj_location.asp

如何向现有网址添加输入

2 个答案: