如何使用javascript在我的天气应用中将单位从摄氏度更改为华氏度？

Question

我一直在尝试建立一个显示用户当地天气的网站。 一切正常，例如，如果您想对单位进行分割，浏览器会再次要求您共享位置，我认为有人会觉得烦恼。 我该如何解决？ 这是代码：

var la;
var lg;
var celsius=1;
var tempChange;

function getLocation() {
 if (navigator.geolocation)
   navigator.geolocation.getCurrentPosition(showPosition); 
}

function showPosition(position) {
 la = position.coords.latitude;
 lg = position.coords.longitude;

 var url="https://fcc-weather-api.glitch.me/api/current?lat=" + la + "&lon=" + lg;

 fetch(url)
  .then((resp) => resp.json())
  .then(function(data) {
    if(celsius===1)
     document.getElementById("temper").innerHTML="Temperature:" + data.main.temp + " °C";
    else
     document.getElementById("temper").innerHTML="Temperature:" + (data.main.temp * 1.8 + 32) + " °F";
    document.getElementById("image").src=data.weather[0].icon;
   })
  .catch(function(error) {
    console.log("error: " + error);
   });
}

getLocation();

function change() {
  if(celsius===0)
   celsius=1;
  else
   celsius=0;
  getLocation();
}

这是一个带有完整HTML和CSS代码的jsfiddle，但是不知何故切换按钮不起作用： https ://jsfiddle.net/1pvjrw3n/。 通常，浏览器会再次询问您的位置，然后更改显示的温度。 每当您要切换单位时，都会发生这种情况。

Answer 1

只需重复使用位置数据，并仅在未提前保存的情况下才要求它。 如果您在两点上更改代码，就可以实现此目的

第一

function showPosition(position) {
  if(!position && (!la || !lg)) getLocation();
  if(position) {
    la = position.coords.latitude;
    lg = position.coords.longitude;
  }

  var url="https://fcc-weather-api.glitch.me/api/current?lat=" + la + "&lon=" + lg;
...

如果没有位置数据作为第一个参数，并且未设置la或lg，则从浏览器api获取位置。 如果设置了位置数据，请将该数据保存在la和lg中，以备将来使用。

第二：

function change() {
  if(celsius===0)
    celsius=1;
  else
    celsius=0;
  showPosition(); // instead of getLocation
}

您每次都调用showPosition而不是直接调用getLocation。 showPosition查看位置数据，并确定是否有必要调用getLocation。

这是工作的小提琴

Answer 2

而不是将onclick放在HTML内。

最好的地方是您的JavaScript中，因为它可能是一个模块。 等等

因此，从HTML中删除onclick，并将其放入您的javascript中。

document.querySelector('#button').onclick = change;