Как мне получить ввод пользователей для получения URL-адреса API?

kyledeato

8 августа 2021 в 20:57

111

//OpenWeather Info
const weatherKey = '*********';
const weatherURL = 'https://api.openweathermap.org/data/2.5/weather'

//Page Elements
const input = document.querySelector("#input").value;
const button = document.querySelector('#submit');

//Fetch
const getWeather = async () => {
    try {
        const apiURL = weatherURL+ "?&q=" + input + "&APPID=" + weatherKey;
        console.log(apiURL);
        const response = await fetch(apiURL);
        if (response.ok) {
            const jsonResponse = await response.json();
            console.log(jsonResponse);
            return jsonResponse;
        } else {
            console.log("request failed!");
        }
    } catch (error) {
        console.log(error);
    }
**}**

const renderWeather = (data) => {
    document.querySelector("#weather-degrees").innerHTML = data.main.temp;
}

const executeSearch = () => {
    getWeather().then(data => renderWeather(data));
}

button.addEventListener('click', executeSearch());

Я не могу получить значение ввода при вводе в текстовое поле, и он не получает APIURL. Еще до того, как я что-то ввожу, консоль выдает мне это. Любая помощь? журналы консоли

Источник

Поделиться Скопировать ссылку Скопировано

Kokodoko

8 августа 2021 в 21:02

Вы должны прочитать входное значение прямо перед вызовом функции выборки!

Kelvin Schoofs

8 августа 2021 в 21:03

Вы должны быть осторожны при размещении ключей API в Интернете, даже если вы используете бесплатный уровень.

Ответы (1)

Kelvin Schoofs

8 августа 2021 в 21:02

Ваш input устанавливается один раз заранее. Вместо этого сделайте что-то вроде:

const input = document.querySelector("#input");
// ...
const apiURL = weatherURL+ "?&q=" + input.value + "&APPID=" + weatherKey;
// or using a template literal
const apiURL = `${weatherURL}?&q=${input.value}&APPID=${weatherKey}`;

Имейте в виду, что вы также должны URL-кодировать ввод.

Поскольку input задается только один раз, для него устанавливается пустая строка. Вы можете напрямую посетить URL-адрес API, например https://api.openweathermap.org/data/2.5/weather?APPID=82510feaa0c1d3a300a7a754ff134404&q=, и заметить, что он не работает. Если вы замените q= правильным значением, например. q=London, все будет нормально.

Имейте в виду, что API также вернет ошибку 400 (но с другим сообщением об ошибке), если вы передадите ему недопустимый город. Прочитайте ошибку из тела ответа и правильно отобразите пользователю ошибку о недопустимом вводе.

Поделиться Скопировать ссылку Скопировано

kyledeato

8 августа 2021 в 21:24

Итак, я сделал то, что вы сказали, используя литерал шаблона и имея input.value внутри apiURL, но он все еще дает мне ту же ошибку. Он все еще пытается получить при запуске, даже когда я перезагружаю его заново. Также по-прежнему не получает значение, когда я ввожу поле и нажимаю «Отправить».

Kelvin Schoofs

8 августа 2021 в 21:28

Вы также обновили свой const input, чтобы он не сразу читался .value?

kyledeato

8 августа 2021 в 21:38

Да, я переключил его на то, что вы сказали с const input = document.querySelector("#input");

Kelvin Schoofs

8 августа 2021 в 21:41

О, я не заметил, что вы также делали button.addEventListener('click', executeSearch());. Вы в основном звоните executeSearch() и говорите: «всякий раз, когда нажимается кнопка, вызывайте результат» (который не является самим executeSearch) . Вместо этого вы должны использовать button.addEventListener('click', executeSearch);.

kyledeato

8 августа 2021 в 21:59

Хорошо, это сработало, но теперь, когда я что-то набираю и отправляю, ничего не выходит из системы и не меняется.

Kelvin Schoofs

8 августа 2021 в 22:02

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

kyledeato

8 августа 2021 в 22:22

Когда я нажимаю «Отправить», я вижу журнал на секунду, и он просто исчезает. Я проверил журналы сохранения и пишет TypeError: Failed to fetch

Kelvin Schoofs

8 августа 2021 в 22:24

Тогда что-то еще не так с вашим кодом. Отметьте этот ответ как решение вашего вопроса (о неправильном URL-адресе и переменной input) и создайте новый, где вы объясните, почему ваш код не выполняется, даже если он регистрируется в определенных местах.