Блог

Главная - Вопросы по программированию - Как получить значение поля поиска с помощью прослушивателя событий и зарегистрировать его

Как получить значение поля поиска с помощью прослушивателя событий и зарегистрировать его

#javascript

Вопрос:

 const searchBtn = document.getElementById("searchBtn");
const searchBar = document.getElementById("searchBar");

let searchQuery;

searchBar.addEventListener("keydown", (e) => {
    if (e.key == "Enter" amp;amp; searchBar.value != "") {
        location.href = 'pages/results/results.html';
        searchQuery = searchBar.value;
    }
    // get value entered and show on results.html
    // results for: "query"
})

console.log(searchQuery); // not working

Это регистрируется как неопределенное, потому что цикл событий продолжается. Как мне дождаться, пока человек нажмет enter, а затем запишет значение после этого. Я не хочу вставлять console.log(searchQuery) это в функцию. Заранее спасибо.

Комментарии:

1. это проблема области, которую вы не можете избежать, чтобы утешить. войдите в функцию. вы можете создать другую функцию и передать ее значение.

Ответ №1:

Вам нужно переместить console.log функцию внутри обработчика событий, чтобы она выполнялась при запуске обработчика событий. Прямо сейчас console.log функция запускается один раз при загрузке сценария (ведение undefined журнала), но ей нечего запускать снова. Попробуйте это:

 const searchBtn = document.getElementById("searchBtn");
const searchBar = document.getElementById("searchBar");

let searchQuery;

searchBar.addEventListener("keydown", (e) => {
    if (e.key == "Enter" amp;amp; searchBar.value != "") {
        location.href = 'pages/results/results.html';
        searchQuery = searchBar.value;
    }
    
    console.log(searchQuery)
})

ИЛИ вот так, если вы хотите, чтобы он срабатывал только при нажатии клавиши Enter amp;amp; searchBar.value :

 const searchBtn = document.getElementById("searchBtn");
const searchBar = document.getElementById("searchBar");

let searchQuery;

searchBar.addEventListener("keydown", (e) => {
    if (e.key == "Enter" amp;amp; searchBar.value != "") {
        location.href = 'pages/results/results.html';
        searchQuery = searchBar.value;
        console.log(searchQuery)
    }
})
Метки: