切換溫度時Javascript Onclick函數不起作用

我正在開發天氣api，並且在攝氏溫度和華氏溫度之間切換時遇到麻煩。切換溫度時Javascript Onclick函數不起作用

我用一個單獨的函數來獲取位置以及來自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因爲我認爲這是來回切換溫度之間的最簡單的方法。我可以得到天氣轉換爲攝氏，但其他語句不起作用。 Fyi，我無法使用標籤名稱來更改按鈕文本，這就是爲什麼我要求在按鈕點擊功能中使用ID。我仍然很熟悉JavaScript。任何幫助，將不勝感激。

來源

2017-10-05 fancy_daniel

您需要設置'buttonText'的'onclick'功能裏面，所以它會獲得當前文本。 – Barmar

或者只是使用'if（buttonId.innerText ==「轉換成Celcius」）' – Barmar

其實，它很混亂。你可以從'document.getElementsByTagName（「button」）[0]'設置'buttonText'，但'buttonId = document.getElementById（'btn'）;'。你爲什麼要測試一個文本，但改變另一個的文本？ – Barmar

當您切換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"; 
 
    } 
 
}

來源

2017-10-05 21:08:09 Barmar

當我點擊按鈕時沒有任何東西。原來的那個你說要改變if條件爲* buttonId.innerText ==「轉換爲攝氏溫度」是有效的。 –

它應該以任何方式工作。由於代碼將'buttonText'設置爲與'buttonId.innerText'相同的東西。 – Barmar

你的變量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]) 
}

來源

2017-10-05 21:13:51 andrewgu

'buttonText'在'onclick'函數的範圍內，它繼承自'getTemp（）'函數的作用域。 – Barmar

@Barmar啊geez。我太習慣於在異步JS中使用回調。 – andrewgu

好吧，x是全球範圍內的變量，用於添加調用將實際天氣放在頁面上的元素。 –

function cToF(celsius) 
{ 
    var cTemp = celsius; 
    var cToFahr = cTemp * 9/5 + 32; 
    var message = cTemp+'\xB0C is ' + cToFahr + ' \xB0F.'; 
    console.log(message); 
} 

function fToC(fahrenheit) 
{ 
    var fTemp = fahrenheit; 
    var fToCel = (fTemp - 32) * 5/9; 
    var message = fTemp+'\xB0F is ' + fToCel + '\xB0C.'; 
    console.log(message); 
} 
cToF(60); 
fToC(45);

這可能有助於

編號：W3Resource

來源

2018-03-06 09:23:14

切換溫度時Javascript Onclick函數不起作用

回答

相關問題