Как сделать чтобы то что в input попадало при нажатии в ссылку и показывалась погода того города, чья долгота и ширина введена

Question

Я получаю информацию о погоде, в input вводится широта и долгота города, в JS в ссылке она должна указываться, мне нужно чтобы в ссылку вставлялась широта и долгота которая была введена в input

Если всё вставится, то выше температуры должно появиться название города, примерно вот так

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>My Weather</title>
</head>
<body>
    <div class="container">
        <div class="practing-table">
            <div class="packageFeatured">
                <p class="package-name">Rostov</p>
                <hr>

                <p class="price">10&deg;</p>
                <p class="disclaimer">clouds</p>
                <hr>

                <ul class="features">
                    <li>
                        Feature 1
                    </li>
                </ul>
                <input type="text" class="koord" id="lat" value="47.2313">
                <input type="text" class="koord" id="lon" value="39.7233">
                <button class="button-primary" onclick="fetch()">Go</button>
            </div>
        </div>
    </div>
    <script src="js/main.js"></script>
</body>
</html>

const lat =  document.getElementById('lat');
const lon =  document.getElementById('lon');
fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=70f3a9c2d617493de79c5fec2b5612c5`)
    .then(function (resp) { return resp.json() })
    .then(function (data) {
        console.log(data);
        document.querySelector('.package-name').textContent = data.name;
        document.querySelector('.price').innerHTML = Math.round(data.main.temp - 273) + '&deg;';
        document.querySelector('.disclaimer').textContent = data.weather[0] ['main'];
        document.querySelector('.features li').innerHTML = data.weather[0] ['icon'];
    })
    .catch(function(){

    });

Answer 1

Вам нужно ваш код обернуть в функцию, так как сейчас запрос отправляется сразу при загрузке страницы. И чтобы получить значение из инпута нужно использовать value так document.getElementById('lat').value

function fetchTest() {

  let lat = document.getElementById('lat').value;
  let lon = document.getElementById('lon').value;
  fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=70f3a9c2d617493de79c5fec2b5612c5`)
    .then(function(resp) {
      return resp.json()
    })
    .then(function(data) {
      console.log(data);
      document.querySelector('.package-name').textContent = data.name;
      document.querySelector('.price').innerHTML = Math.round(data.main.temp - 273) + '&deg;';
      document.querySelector('.disclaimer').textContent = data.weather[0]['main'];
      document.querySelector('.features li').innerHTML = data.weather[0]['icon'];
    })
    .catch(function(e) {
      console.log(e)
    });

}

<div class="container">
  <div class="practing-table">
    <div class="packageFeatured">
      <p class="package-name">Rostov</p>
      <hr>

      <p class="price">10&deg;</p>
      <p class="disclaimer">clouds</p>
      <hr>

      <ul class="features">
        <li>
          Feature 1
        </li>
      </ul>
      <input type="text" class="koord" id="lat" value="47.2313">
      <input type="text" class="koord" id="lon" value="39.7233">
      <button class="button-primary" onclick="fetchTest()">Go</button>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как сделать чтобы то что в input попадало при нажатии в ссылку и показывалась погода того города, чья долгота и ширина введена

Ответы (1 шт):