Как добавить вход в существующий URL

Question

Так что я уже довольно долго пытаюсь найти способ сделать это,

Если человек набирает: «input» -> ссылка кнопки становится instancele.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 () метод.

Вы можете вызвать changeLink, когда событие blur сработало.Затем используйте baseHref и объедините его со значением из button, полученным из value свойства элемента ввода.

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