jQuery Button only works once cannot change fahrenheit to celsius

Question

<!DOCTYPE html>
<html>
<head>
    <title>Local Weather</title>
    <script
    src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons-wind.css">
    <link rel="stylesheet" type="text/css" href="Local Weather.css">
</head>
<body>
    <script type="text/javascript" src="Local Weather.js"></script>
    <div class="container">       
        <center>
            <h1 id="degree"></h1>           
            <h1 id="name"></h1>
            <h1 id="description"></h1>
        </center>
    </div>
</body>
</html>

var latitude, longitude, url, btn, temp;
var test = true;
$(document).ready(function()
{
    $.getJSON("https://freegeoip.net/json/", function(data)
    {
        latitude = data.latitude;
        longitude = data.longitude;
        url = "https://fcc-weather-api.glitch.me/api/current?lat="+latitude+"&lon="+longitude;
        $.getJSON(url, function(data2)
        {  
            temp = data2.main.temp;
            $("#degree").html(temp + '<button id="corf">&#8451;</button>');
            $("#name").html(data2.name);
            $("#description").html(data2.weather[0].description + '<img id="icon" src='+ data2.weather[0].icon + '/>');
            btn = $("#corf");
            btn.click(function ()
            {
                if(test)
                {
                    temp = (temp * 1.8) + 32;
                    $("#degree").html(temp + '<button id="corf">&#8457;</button>');
                    test = false;
                }
                else
                {
                    temp = (temp * 0.5556) - 32;
                    $("#degree").html(temp + '<button id="corf">&#8451;</button>');
                    test = true;
                }
            });
        });
    });
});

Cannot change Celsius to Fahrenheit multiple times, what's wrong?

First of all, saying `psplsplsplsplsplsplspslpslpsl` doesn't help. Second, if your searched a bit you would find the problem: use `$(document).on("click","#corf",function() {`. Problem is that you re-add the button, so it doesn't exist in the dom anymore — Carsten Løvbo Andersen, Aug 04 '17 at 10:11
If the system says that your question needs more information to be submitted, then **you should add more information**. Filling your question with garbage text to get past the limit is considered abusive behavior, and won't help you to get a good answer. — Cody Gray - on strike, Aug 04 '17 at 10:20
one of the reason for issues can be found at https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — SAMUEL, Aug 04 '17 at 12:28

score 0 · Accepted Answer · answered Aug 04 '17 at 10:15

You are trying to bind the click event to the element which doesn't exists in the DOM. To make sure your events binding is proper you can use Event Delegation. Just add event to the parent element and check for the event.target. If event.target is the button, the do the proper calculation.

var latitude, longitude, url, btn, temp;
var test = true;
$(document).ready(function() {
  $.getJSON("https://freegeoip.net/json/", function(data) {
    latitude = data.latitude;
    longitude = data.longitude;
    url = "https://fcc-weather-api.glitch.me/api/current?lat=" + latitude + "&lon=" + longitude;
    $.getJSON(url, function(data2) {
      temp = data2.main.temp;
      $("#degree").html(temp + '<button id="corf">&#8451;</button>');
      $("#name").html(data2.name);
      $("#description").html(data2.weather[0].description + '<img id="icon" src=' + data2.weather[0].icon + '/>');
      $('#degree').click(function(e) {
        if (e.target.id === 'corf') {
          var newTemp = 0;
          if (test) {
            newTemp = (temp * 1.8) + 32;
            $("#degree").html(newTemp + '<button id="corf">&#8457;</button>');
            test = false;
          } else {
            newTemp = temp;
            $("#degree").html(newTemp + '<button id="corf">&#8451;</button>');
            test = true;
          }
        }
      });
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <script type="text/javascript" src="Local Weather.js"></script>
  <div class="container">
    <center>
      <h1 id="degree"></h1>
      <h1 id="name"></h1>
      <h1 id="description"></h1>
    </center>
  </div>
</body>

score 0 · Answer 2 · answered Aug 04 '17 at 10:19

Try this:

var latitude, longitude, url, btn, temp;
var test = true;
$(document).ready(function()
{
    $.getJSON("https://freegeoip.net/json/", function(data)
    {
        latitude = data.latitude;
        longitude = data.longitude;
        url = "https://fcc-weather-api.glitch.me/api/current?lat="+latitude+"&lon="+longitude;
        $.getJSON(url, function(data2)
        {  
            temp = data2.main.temp;
            $("#degree").html(temp + '<button id="corf">&#8451;</button>');
            $("#name").html(data2.name);
            $("#description").html(data2.weather[0].description + '<img id="icon" src='+ data2.weather[0].icon + '/>');
            btn = $("#corf");
            $(document).on('click',btn,function ()
            {
                if(test)
                {
                    temp = (temp * 1.8) + 32;
                    $("#degree").html(temp + '<button id="corf">&#8457;</button>');
                    test = false;
                }
                else
                {
                    temp = (temp - 32) / 1.8;
                    $("#degree").html(temp + '<button id="corf">&#8451;</button>');
                    test = true;
                }
            });
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <script type="text/javascript" src="Local Weather.js"></script>
  <div class="container">
    <center>
      <h1 id="degree"></h1>
      <h1 id="name"></h1>
      <h1 id="description"></h1>
    </center>
  </div>
</body>

jQuery Button only works once cannot change fahrenheit to celsius

2 Answers2