Как получить текст из поля ввода с помощью JavaScript?

Оффтоп javascript
1

Привет, ребята! У меня возникла проблема с JavaScript. Пытаюсь сделать поиск на сайте, но не могу использовать форму, так как она ломает другие элементы страницы. Вот мое поле ввода:

<input name="поиск" type="text" maxlength="100" id="поисковаяСтрока" class="полеПоиска"/>

А вот мой JavaScript:

function выполнитьПоиск() {
  let адрес = "https://example.com/search/" + (значение из поля ввода);
  window.location = адрес;
}

Как мне получить текст из поля ввода и использовать его в функции? Буду благодарен за любую помощь!

2

для получения значения из поля ввода можно использовать свойство value. вот как можно изменить твою функцию:

function выполнитьПоиск() {
  let поисковаяСтрока = document.getElementById('поисковаяСтрока');
  let значение = поисковаяСтрока.value;
  let адрес = 'https://example.com/search/' + значение;
  window.location = адрес;
}

так ты получишь текст, который пользователь ввел в поле. еще совет – лучше использовать encodeURIComponent() для значения, чтобы корректно обработать спецсимволы в поисковом запросе. удачи с реализацией поиска!

3

Я бы сделал немного по-другому. Вместо getElementById можно использовать querySelector - он более гибкий:

function выполнитьПоиск() {
  let значение = document.querySelector('.полеПоиска').value.trim();
  if (значение) {
    let адрес = `https://example.com/search/${encodeURIComponent(значение)}`;
    location.href = адрес;
  }
}

Так мы получаем значение по классу, удаляем пробелы по краям и проверяем, что поле не пустое. Плюс используем шаблонные строки - так код чище.

4

Можно еще добавить обработчик события ‘keyup’ на поле ввода, чтобы поиск выполнялся при нажатии Enter:

document.querySelector(‘.полеПоиска’).addEventListener(‘keyup’, function(e) {
if (e.key === ‘Enter’) выполнитьПоиск();
});

Так пользователю будет удобнее. И не забудь проверить, существует ли элемент, перед тем как работать с ним - это поможет избежать ошибок.