Anchor with onclick event works only once

Question

Im trying to change temperature from celsius to farenheit and viceversa, but when i try it works only once, changes from celsius to farenheit and stays there. Here is my page : http://codepen.io/Juan1417/pen/zKZkxy .

and the code:

$(document).ready(function(){

 var temp;
 var long;
 var lat;   

 if(navigator.geolocation){

  navigator.geolocation.getCurrentPosition(function(position){

   lat=position.coords.latitude;
   long=position.coords.longitude;

   var api="http://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&appid=c873adc18574701f4fb0abe01d927819";


   $.getJSON(api,function(data){

        var city =data.name;
        var country=data.sys.country;   
        var weather=data.weather[0].main;
        temp=data.main.temp;

        addIcon(weather);  

        document.getElementById('location').innerHTML =city+", "+country;
        document.getElementById('temperature').innerHTML =(temp-273.13)+"<a  id='anc' href='#'> Cº</a>";

        $("#anc").click(function(e){

          if(document.getElementById('anc').innerHTML==" Cº") document.getElementById('temperature').innerHTML =(temp*1.8+32)+"<a id='anc' href='#'> Fº</a>";

          else document.getElementById('temperature').innerHTML =(temp-32/1.8)+"<a id='anc' href='#'> Fº</a>"; 

          });  
        }); 
     }); 


 }

       function addIcon(weather) {

           switch(weather){

            case 'Dizzle':

                document.getElementById('animation').innerHTML ="<div class='icon sun-shower'><div class='cloud'></div><div class='sun'><div class='rays'></div></div><div class='rain'></div></div>";
                  break;

                case 'Rain':
                  document.getElementById('animation').innerHTML ="<div class='icon rainy'><div class='cloud'></div><div class='rain'></div></div>";
                  break;
                case 'Snow':
                  document.getElementById('animation').innerHTML ="<div class='icon flurries'><div class='cloud'></div><div class='snow'><div class='flake'></div><div class='flake'></div></div>>/div>";
                  break;
                case 'Clear':
                  document.getElementById('animation').innerHTML ="<div class='icon sunny'><div class='sun'><div class='rays'></div></div></div>";
                  break;
                case 'Thunderstom':
                  document.getElementById('animation').innerHTML ="<div class='icon thunder-storm'><div class='cloud'></div><div class='lightning'><div class='bolt'></div><div class='bolt'></div></div></div>";
                  break;
                default:

         }

      }
});

Answer 1

You're re-creating the <a> that the event is attached to. You need to either not overwrite the element on every click, or instead of listening for a click on the element, listen for it on the document and see if it happened to land on that element.

replace

$("#anc").click(function(e){

with

$(document).on("click", "#anc", function(){

see: jQuery's .on()

Also, your if/else were both showing Fereheit.

Here is the corrected fiddle