jquery click function only working once?

Question

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/

Can you make jsfiddle for this? – Mayur Patel Apr 17 '17 at 12:07 — Mayur Patel, Apr 17 '17 at 12:07
Added answer check it and let me know – Mayur Patel Apr 17 '17 at 12:44 — Mayur Patel, Apr 17 '17 at 12:44

score 1 · Accepted Answer · answered Apr 17 '17 at 12:43

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>") {

You have used assignment operator "=" instead of compare operator "==". So use "==" instead of "=".
document.getElementById("units").innerHTML gives string with space so you have to remove space so use trim()

document.getElementById("units").innerHTML.trim()
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.

Thank you so much! This was it! And thank you for the explanation of why it was behaving as it was, huge help! — Scott, Apr 17 '17 at 12:53

score 0 · Answer 2 · answered Apr 17 '17 at 11:11

0

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

answered Apr 17 '17 at 11:11

Dardan Iljazi

747
1
9
16

score 0 · Answer 3 · answered Apr 17 '17 at 11:23

0

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/

answered Apr 17 '17 at 11:23

Vinay Pratap Singh Bhadauria

9,829
3
28
49

Thank you for your answer. Unfortunately this didn't work for me, and even on the jsfiddle link you posted, it's only toggling once for me – Scott Apr 17 '17 at 11:58
@Scott Check the console, every time you click, a console entry is logged. – Vinay Pratap Singh Bhadauria Apr 18 '17 at 04:15

jquery click function only working once?

3 Answers3