CODEWITHSUNDEEP
jqueryclick
Scott
Scott

Reputation: 1247

jquery click function only working once?

I'm new to JavaScript. I'm making a weather app that is using the wunderground API which fetches the current weather for the user's location. I want to allow the user to toggle between fahrenheit and celsius temperatures on a click. The app currently auto-populates fahrenheit (as I want), and it will toggle to celsius on one click, but then will not toggle any more on subsequent clicks. I'd like it to toggle back and forth between fahrenheit and celsius on subsequent clicks. Any help in understanding why and how to fix would be appreciated. Thank you.

Here is my JS:

$(document).ready(function() {
  if (navigator.geolocation) {

    // get user's location
    navigator.geolocation.getCurrentPosition(function(position) {

      // url for WU API
      var url = "https://api.wunderground.com/api/(API KEY)/conditions/q/" + position.coords.latitude + "," + position.coords.longitude + ".json";

      // get JSON of current weather
      $.getJSON(url, function(response) {

        // celsius
        var cel = response.current_observation.temp_c + " &#8451, "

        // city
        var city = response.current_observation.observation_location.city;

        // fahrenheit
        var far = response.current_observation.temp_f + " &#8457, ";

        // weather icon (e.g., rainy, cloudy)
        var icon = '<img src="' + response.current_observation.icon_url + '"/>';

        // weather text (e.g., "rainy", "cloudy")
        var weather = response.current_observation.weather;

        // populate each element with the JSON
        $(".city").html(city);
        $(".icon").html(icon);
        $(".temp").html(far);
        $(".weather").html(weather);

        // PROBLEM AREA: Only working once
        // on click, toggle between celsius and fahrenheit
        $("#units").on("click", function() {
          if (document.getElementById("units").innerHTML = "<a>&#8451</a>") {
            $(".temp").html(cel);
            $("#units").html("<a>&#8457</a>");
          }
          else {
            $(".temp").html(far);
            $("#units").html("<a>&#8451</a>");
          }
        });
      });
    });
  };
 });

And here's my HTML:

<div class="container-fluid">
  <div id="title">
    <div class="text-center">
    Current Weather In
    </div>
    <div>
      <span class="city"></span><br>
      <span class="icon"></span>
    </div>
  </div>
  <div>
    <span class="temp"></span>
    <span class="weather"></span>
  </div>
  <div id="units">
    <a>&#8451</a>
  </div>
</div>

EDIT: Here's a jsfiddle: https://jsfiddle.net/WSox1235/w88tek6j/

Upvotes: 2

Views: 92

Answers (3)

Mayur Patel
Mayur Patel

Reputation: 1751

I found your problem. Please refer this fiddle.

I can't use your API without API key so for now, I have taken .on("click" event section outside of navigator.geolocation, just above the if (navigator.geolocation).

Here I found 3 issue in this line :

if (document.getElementById("units").innerHTML = "<a>&#8451</a>") {

  1. You have used assignment operator "=" instead of compare operator "==". So use "==" instead of "=".

  2. document.getElementById("units").innerHTML gives string with space so you have to remove space so use trim()

    document.getElementById("units").innerHTML.trim()

  3. document.getElementById("units").innerHTML.trim() doesn't give you the encoded value. It gives you the value from DOM as is like <a>℃</a>. So you have to change IF statement like

    document.getElementById("units").innerHTML.trim() == "<a>℃</a>

I have commented codes in jsFiddle that are related to API.

Hope this helps you.

Upvotes: 1

Vinay Pratap Singh Bhadauria
Vinay Pratap Singh Bhadauria

Reputation: 9947

Just move your click function outside the if make the variables global that are used inside the click function

$(document).ready(function() {
var cel = '';
  $("#units").on("click", function() {
    console.log("a");
    if (document.getElementById("units").innerHTML = "<a>&#8451</a>") {
      $(".temp").html(cel);
      $("#units").html("<a>&#8457</a>");
    } else {
      //$(".temp").html(far);
      $("#units").html("<a>&#8451</a>");
    }
  });
//rest of the if code here, assign value to global variables inside if block.

DEMO: https://jsfiddle.net/5kfns0uj/1/

Upvotes: 0

Dardan Iljazi
Dardan Iljazi

Reputation: 827

if (document.getElementById("units").innerHTML = "<a>&#8451</a>")

Should be

if (document.getElementById("units").innerHTML == "<a>&#8451</a>")

According to https://www.w3schools.com/js/js_comparisons.asp

Upvotes: 0

Related Questions