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，因为我认为这是在temp之间来回切换的最简单方法。我可以将天气转换为Celsius，但else语句不起作用。 Fyi，我无法使用标签名称来更改按钮文本，这就是我在按钮单击功能中使用id的原因。我仍然是Javascript的新手。任何帮助，将不胜感激。

Answer 1

当你切换buttonText的文本时，你需要更新buttonId变量。

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])
}