0

I want x.innerText in out id in p tag and y.innerText in weatherid in p tag which I'm not getting.

I have used API to get the detail of geolocation which is in JSON format so please help me solve this

let x = document.getElementById("out");
let y = document.getElementById("weather");

function geolocation() {
  if (navigator.geolocation) { //inbuild feature of html navigator if it support then
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerText = "Geo not supported"
  }
}

function showPosition(data) {
  console.log(data)
  let lat = data.coords.latitude;
  let lon = data.coords.longitude;
  x.innerText = `latitude is ${lat} and longitude is ${lon}`
  //api calling
  const url = `https://api.openweathermap.org/data/2.5/forecast/daily?lat=${lat}&lon=${lon}&mode=json&units=metric&cnt=5&appid=fbf712a5a83d7305c3cda4ca8fe7ef29`;
  //
  fetch(url, {
      method: `GET`
    }) //for getting the data use GET method, fetch is a method 
    .then((res) => res.json()) //promise is pending 
    //resolve the promise
    .then((data) => { //we get the data
      console.log(data)
      let cityName = data.city.name;
      let temp = data.list[0].temp.day + ` degree celcius`;
      y.innerText = `weather of ${cityName} is ${temp}`
    })
}
<div class="dropdown" onclick="geolocation()">
  <button class="btn btn-secondary dropdown-toggle weather" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" ariexpanded="false">
        <img class="weathericon" src="https://i.ibb.co/CQyrsQd/icons8-weather-48.png" alt="">
        </button>

  <ul class="dropdown-menu weatherdropdown" aria-labelledby="dropdownMenuButton1">
    <li>
      <p id="out"></p> neha
    </li>
    <li>
      <p id="weather"></p> kumavat
    </li>
  </ul>
</div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Neha Kumavat
  • 1
  • 2
  • Please visit the [help], take the [tour] to see what and [ask]. Do some research. If you get stuck, post a [mcve] of your attempt, noting input and expected output using the [\[<>\]](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) snippet editor like I just did. Also please try to write clearly – mplungjan May 09 '23 at 06:30
  • Using a global call sometimes not a good idea. It maybe duplicated but I already improve your code [here](https://codepen.io/neyubee/pen/vYVXjgZ). – Newbee May 09 '23 at 06:57

0 Answers0