Switching between values with JS

1

I don’t understand why this doesn’t work. The aim is to click a button and change a div’s value from one to the other.

Here’s the project at the moment - https://codepen.io/sk1995/pen/MrmBpp

I want to click #btn and have #temperature change from

Math.round(locinfo.main.temp- 273.15) +" degrees celsius"

to

Math.round(locinfo.main.temp) +" degrees fahrenheit"

Here’s my attempt:

document.getElementById("btn").onclick = function(change) {
              if(temperature.innerHTML = Math.round(locinfo.main.temp- 273.15) +" degrees celsius") {
                temperature.innerHTML = Math.round(locinfo.main.temp) +" degrees fahrenheit";
              }
              else {
                temperature.innerHTML = Math.round(locinfo.main.temp- 273.15) +" degrees celsius";
              }
            }

All of JS, in case you want it:

$(document).ready(function() {

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        
        var lat = position.coords.latitude;
        var long = position.coords.longitude;
    
        $(document).ready(function() {
          var myRequest = new XMLHttpRequest();
  myRequest.open('GET','https://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+long+'&appid=a2037a9fa9bde1d4d6f8d0ea3fd4e32a');
          myRequest.onload = function() {
          var locinfo = JSON.parse(myRequest.responseText);
          var temperature = document.getElementById("temperature");
          temperature.innerHTML = Math.round(locinfo.main.temp- 273.15) +" degrees celsius";
            
            document.getElementById("btn").onclick = function(change) {
              if(temperature.innerHTML = Math.round(locinfo.main.temp- 273.15) +" degrees celsius") {
                temperature.innerHTML = Math.round(locinfo.main.temp) +" degrees fahrenheit";
              }
              else {
                temperature.innerHTML = Math.round(locinfo.main.temp- 273.15) +" degrees celsius";
              }
            }
            
            /*temperature.innerHTML = Math.round(locinfo.main.temp- 273.15) +" degrees celsius";*/
            
            /*document.getElementById("fahrenheit").onclick = function(changetof) {
              temperature.innerHTML = Math.round(locinfo.main.temp) +" degrees fahrenheit";
            }*/
            
          var location = document.getElementById("location");
          location.innerHTML = locinfo.name;
          var weather = document.getElementById("weather");
          weather.innerHTML = locinfo.weather[0].main;
          var weatherimg = document.getElementById("weatherimg");
          var imgcode = locinfo.weather[0].icon;
          weatherimg.src = "http://openweathermap.org/img/w/"+ imgcode + ".png";
          }; 

          myRequest.send();
	
          });
    
      });
    };
});

Could someone explain to me just why this does not work? At the moment, I am not looking for a way to make it work (so please no spoilers unless requested. haha), but rather just understand why this code specifically does not work.

Thanks. :slight_smile:

2

You are using the assignment operator =, you need to use a comparison operator, either == or ===.

1 Like
3

facepalm

Sometimes you forget the most simple things… :smiley:

thank you!

4

Everybody’s made that bug at some point.