Juan Juan - 1 month ago 9
Javascript Question

Anchor with onclick event works only once

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

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

Comments