Нужна помощь с input.value и изменением значения?

Question

[idpgg]

<div class="weather-wrapper">
      <div class="weather">
        <p class="City"></p>
        <p class="temperature"></p>
        <p class="disclaimer"></p>
        <p class="ico"></p>
        <p id="startLat"></p>
        <p id="startLon"></p>
        <input type="text" class="input"></input> <button id="button">pick</button>

let city = ['Минск'];
let inputName = document.querySelector(".input")
function valueGet(){
 city.push(inputName.value)
 city.shift()
 console.log (city.toString())
}

let button = document.querySelector('#button').addEventListener('click', function(){
  console.log (city[0] = inputName.value)
  valueGet()
})
let apiKey = "6c273cbb2593e6efce1a4c12e3db2db5";
fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city}&lang=ru&appid=${apiKey}`)
  .then(function (resp) {
    return resp.json();

  })
  .then(function (data) {
    let cityName = document.querySelector(".City").innerHTML = data.name ;
    let temperature = (document.querySelector(".temperature").innerHTML = Math.floor(data.main.temp - 273) + "&deg");
    let disclaimer = (document.querySelector(".disclaimer").textContent = data.weather[0]["description"]);
    let ico = (document.querySelector(".ico").innerHTML = `<img src="https://openweathermap.org/img/wn/${data.weather[0]["icon"]}@2x.png">`);
    console.log (data)
  })
  .catch(function () {});

Нужно что бы при вводе города в input менялся город и в переменной city и показывало другой город.

Comments

[keyotor]

inputName.addEventListener('change', () => {
  valueGet();
});

Как я понял нужно это?

[idpgg]

keyotor, Я пытался так сделать но не выходит. сделал даже как массив который убирается и добавляется новый элемент, но почему-то он не меняет мою переменную сити

[keyotor]

idpgg, А что если сделать вот так:

inputName.addEventListener('input', () => {
  valueGet();
});

[idpgg]

keyotor, не меняется город все равно.

[keyotor]

idpgg, Я правильно понимаю что при вводе города в инпут нужно подгружать данные с этого апи?

[idpgg]

keyotor, ДА

[idpgg]

keyotor, Я ТАМ уже намудрил, как только возможно

[keyotor]

idpgg, А что если fetch завернуть в функцию и вызывать ее когда в инпут что то вводится?

function fetchData() {
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&lang=ru&appid=${apiKey}`)
  .then(function (resp) {
    return resp.json();

  })
  .then(function (data) {
    let cityName = document.querySelector(".City").innerHTML = data.name ;
    let temperature = (document.querySelector(".temperature").innerHTML = Math.floor(data.main.temp - 273) + "&deg");
    let disclaimer = (document.querySelector(".disclaimer").textContent = data.weather[0]["description"]);
    let ico = (document.querySelector(".ico").innerHTML = `<img src="https://openweathermap.org/img/wn/${data.weather[0]["icon"]}@2x.png">`);
    console.log (data)
  })
  .catch(function () {});
}

и эту функцию уже вызвать здесь:

inputName.addEventListener('input', () => {
  valueGet();
 fetchData();
});

Попробуйте это, у меня вроде бы сработало

[idpgg]

keyotor, и правда срабатывает, но только 1 раз почему-то
weather.js:6 Uncaught TypeError: city.push is not a function
at valueGet (weather.js:6)
at HTMLInputElement. (weather.js:28)
потом вот ошибки

[idpgg]

keyotor, все нашел в чем проблема и пофиксил

[keyotor]

idpgg, Удачи!

Answer 1

[Alex]

А зачем вам записывать значение в глобальную переменную и заморачиваться с её обновлением если всё что вам нужно -- получать из инпута данные (на лету) в том месте и в то время когда нужно? Вот где вы вызываете city? Вот там просто вызывайте input.value

Comments

[idpgg]

не совсем понял как сделать это. а если сделать так? и можно ли так?
fetch(`http://api.openweathermap.org/data/2.5/weather?q=$...}`)