Javascript Onclick 函数在切换温度时不起作用

Question

我正在开发一个天气 api，但我在摄氏度和华氏度之间切换时遇到了问题。

我使用了一个单独的函数来获取位置以及从 API 调用。

我还在第二个函数中添加了一个 onclick 函数。我可以让它切换到一个温度，但不能回去。

function getTemp(data) {
  // API variables
  var temp1 = data.main.temp;
  var weatherUrl = data.weather[0].icon;
  var tempInC = Math.round(temp1); // Temp in Celsius
  var tempInF = Math.round(temp1 * 9/5 +32)
  // Inner HTML variables
  var weatherF = "The weather is " + tempInF + " &#8457; <br>" +
     "<img src='" + weatherUrl + "'/>";
  var weatherC = "The weather is " + tempInC + " &#8451; <br>" +
     "<img src='" + weatherUrl + "'/>";
  // Button DOM variables
  var buttonText = document.getElementsByTagName("button")[0].innerText;
  var buttonId = document.getElementById('btn');
  x.innerHTML = weatherF;
  buttonId.onclick = function toggleTemp() {
    if(buttonText == "Convert to Celsius") {
       x.innerHTML = weatherC; 
     buttonId.innerText = "Convert to Fahrenheit";
    } else {
      x.innerHTML = weatherF;
      buttonId.innerText = "Convert to Celsius";
    }
  }
}

我使用innerText是因为我认为这是在温度之间来回切换的最简单方法。我可以让天气转换为摄氏度，但 else 语句不起作用。仅供参考，我无法使用标签名称更改按钮文本，这就是我在按钮单击功能中使用 id 的原因。我对Javascript还是很陌生的。任何帮助将不胜感激。

Answer 1

切换

buttonId 的文本时需要更新 buttonText 变量。

buttonId.onclick = function toggleTemp() {
  if (buttonText == "Convert to Celsius") {
    x.innerHTML = weatherC;
    buttonText = buttonId.innerText = "Convert to Fahrenheit";
  } else {
    x.innerHTML = weatherF;
    buttonText = buttonId.innerText = "Convert to Celsius";
  }
}

Answer 2

您的变量x未定义。将来，请尽量避免使用 innerHTML 属性，该属性可能会中断事件侦听器并呈现缓慢。

buttonText和x都没有在onclick函数的范围内定义，这可能就是什么都没有发生的原因。您是否检查过控制台是否有错误？

function getTemp(data) {
    // API variables
    var temp1 = data.main.temp;
    var weatherUrl = data.weather[0].icon;
    var tempInC = Math.round(temp1); // Temp in Celsius
    var tempInF = Math.round(temp1 * 9/5 +32)
    // Inner HTML variables
    var weatherF = "The weather is " + tempInF + " &#8457; <br>" +
        "<img src='" + weatherUrl + "'/>";
    var weatherC = "The weather is " + tempInC + " &#8451; <br>" +
        "<img src='" + weatherUrl + "'/>";
    // Button DOM variables
    var x = ...;  // Declare x for the function scope here
    var buttonText = document.getElementsByTagName("button")[0].innerText;
    var buttonId = document.getElementById('btn');
    x.innerHTML = weatherF;
    buttonId.onclick = (function (x, wC, wF, btn) {
        return function () {
            // Change DOM
            if(btn.innerText == "Convert to Celsius") {
                x.innerHTML = wC; 
                btn.innerText = "Convert to Fahrenheit";
            } else {
                x.innerHTML = wF;
                btn.innerText = "Convert to Celsius";
            }
        };
    })(x, weatherC, weatherF, document.getElementsByTagName("button")[0])
}