Поле поиска становится пустым, когда я ищу Giphy API

Question

Я использую Giphy API, пытаюсь заставить мое приложение Giphy работать. Всякий раз, когда я отправляю поиск в API Giphy, мой поиск оказывается пустым. Даже когда я что-то ввел в поле поиска. У меня есть console.log() все, и консоль говорит мне, что мои параметры поиска выходят пустыми. Не уверен, почему все, что я выполняю в поле поиска, не отправляется в API. Вот некоторый код Javascript: ``let giphySend = $("#giphySend"); let giphyInput = $("#giphyInput") .val() .trim(); let giphyHeader = $("#giphyHeader h1"); let giphyAPIKey = "GET A GIPHY API KEY"; let giphyInputArray = []; $(giphySend).on("click", function() { event.preventDefault(); let url = "https://api.giphy.com/v1/gifs/search?api_key=" + giphyAPIKey + "&limit=5&q=" + giphyInput; ``fetch(url) .then(response => { console.log(response); return response.json(); }) .then(json => { console.log(json); console.log(json.data);})

     .catch(err => console.log(err));
 });

извините, форматирование немного странное. Вот немного HTML:

  `<aside id="aside">
      <input
        type="search"
        placeholder="Search Giphy..."
        id="giphyInput"
      /><input type="submit" value="Send Request" id="giphySend" />
    </aside>
    <script src="assets/javascript/app.js"></script>`

Answer 1

Ошибка, которую вы делаете, заключается в том, что вы берете значение из поля поиска, когда загружаются ваши скрипты или веб-страница, поэтому изначально giphyInput = "";и когда вы нажимаете кнопку поиска, это все еще пустая строка. Вы должны указать jquery, что нужно получить последнее значение из DOM.

, поэтому в вашей функции обратного вызова on ("click") сделайте это.

$(giphySend).on("click", function() {

`event.preventDefault();`

`//tell jquery to give latest value`

giphyInput = $("#giphyInput").val().trim()

`//Rest of your code with fetch function`

}

Answer 2

Проблема заключается в том, что вы определяете let giphyInput = $("#giphyInput").val().trim(); вне события щелчка, поэтому при запуске события щелчка giphyInput равно нулю, потому что во время запуска в реальном времени ввод равен нулю.

Решение:

$(giphySend).on("click", function() {
let giphyInput = $("#giphyInput").val().trim();

Переместить ввод в событие щелчка.