Как я могу сделать текстовое поле для функции JavaScript?

Question

Я думаю, мне удалось написать сценарий.Я просто не могу сделать текстовое поле в HMTL для ввода недостающих данных.Предполагается, что он получит ключевое слово из текстового поля при отправке и перейдет по URL.

Я перепробовал несколько способов форм и все.Должен был установить VB.net, и это было бы сделано за 5 минут.

function urlMaker(keyword) {
  var base = "https://www.example.com/list.php?q=";
  var ending = "&dhd=1&hdd=low&dtt=list";
  var url;
  url = base + keyword + ending;
  window.location.assign(url);
}

Короче говоря: мне нужно знать, как создать страницу HTML с текстовым полем и кнопкой отправки.Когда я отправляю, он берет текст из поля, запускает функцию и передает его с ключевым словом из текстового поля.Когда функция запущена, она перенаправляет браузер.

Answer 1

Полагаю, у вас есть такая форма.

Просто прикрепите к ней submit обработчик событий:

document.querySelector("#search").addEventListener("submit", urlMaker)

function urlMaker(event) {
  let keyword = document.querySelector("#keyword").value;
  let base = "https://www.example.com/list.php?q=";
  let ending = "&dhd=1&hdd=low&dtt=list";
  let url;
  event.preventDefault();
  url = base + keyword + ending;
  window.location.href = url;
}

<form id="search">
  <input type="text" id="keyword" />
  <button type="submit">Search</button>
</form>