Javascript Click 기능이 작동하지 않습니다.

날씨가 약간 좋은 앱을 만들고 있습니다. 내가하려는 일은 화씨와 섭씨 사이에서 ° 단위를 전환하기 위해 큰 날씨 아이콘 클릭 할 수있게 만드는 것입니다.Javascript Click 기능이 작동하지 않습니다.

내 코드가 아무 것도하지 않는 것 같습니다. 나는 누군가가 올바른 방향으로 나를 안내 할 수 있거나 나에게 힌트를 줄 수 있다면, 나는 그와 비슷한 것에 접근해야만하는 것에 감사 할 것이다.

http://codepen.io/ttimon/pen/QEPZJW 감사합니다 :

function getLocation() { 
 
    if (navigator.geolocation) { 
 
    navigator.geolocation.getCurrentPosition(showPosition); 
 
    } else { 
 
    ausgabeLocation.innerHTML = "Geolocation is not supported by this browser."; 
 
    } 
 
} 
 

 
function showPosition(position) { 
 
    var lon = position.coords.longitude; 
 
    var lat = position.coords.latitude; 
 
    var jsonURL = 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&units=imperial&APPID='; 
 
    getWeather(jsonURL, lon, lat); 
 
} 
 

 
function getWeather(jsonURL, lon, lat) { 
 

 
    $.getJSON(jsonURL, function(json) { 
 
    var tempFahr = json['main']['temp']; 
 
    var tempCels = Math.floor(((tempFahr - 32)/1.8) * 100)/100; 
 
    var iconID = json['weather'][0]['id']; 
 
    var city = json['name']; 
 
    ausgabeLocation.innerHTML = city; 
 
    ausgabeTemp.innerHTML = tempCels + "°C"; 
 
    $("#iconShow").html("<i class='owf owf-" + iconID + "'></i>"); 
 
    }); 
 
} 
 

 
$(document).ready(function() { 
 
    getLocation(); 
 
    var unitSwitch = false; 
 
    $('.swapUnit').click(function() { 
 
    if (unitSwitch) { 
 
     $(this).html(tempCels + " '°C'"); 
 
     unitSwitch = false; 
 
    } else { 
 
     $(this).html(tempFahr + " '°F'"); 
 
     unitSwitch = true; 
 
    } 
 
    }) 
 
});

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

 
<body> 
 
    <h1 id="ausgabeLocation" class="text-center"></h1> 
 
    <div id="cont-center" class="box container-fluid box-shadow"> 
 

 

 
    <span id="iconShow" class="icon1"></span> 
 
    <div id="ausgabeTemp" class="swapUnit"> 
 
     </h2> 
 
    </div> 
 

 
</body>

당신은 여기에 모든 것을 볼 수 있습니다

편집 : 좋아, 나는 몇 가지를 바꿨다. 아래 코드를 참조하십시오. 내가 궁금해하는 유일한 점은 전역 변수를 사용하지 않고 할 수 있었다는 것입니다.

자바 스크립트

function getLocation() { 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(showPosition); 
    } else { 
     ausgabeLocation.innerHTML = "Geolocation is not supported by this browser."; 
    } 
} 
function showPosition(position) { 
    var lon = position.coords.longitude; 
    var lat = position.coords.latitude; 
    getWeather(lon, lat); 
} 

function getWeather(lon,lat){ 
     var jsonURL = 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&units=metric&APPID=af0761262e54344b40ea5757a84f9e81'; 
     $.getJSON(jsonURL,function(json){ 
      var temp = json['main']['temp']; 
      var iconID = json['weather'][0]['id']; 
      var city = json['name']; 
      writeStuff(temp,iconID,city); 
      }); 
     function writeStuff(temp,iconID,city){ 
      window.tempFahr = Math.floor(temp*9/5+32); 
      window.tempCels = Math.floor(temp*100/100); 
      ausgabeLocation.innerHTML = city; 
      ausgabeTemp.innerHTML = tempCels + "°C"; 
      $("#iconShow").html("<i class='owf owf-"+iconID+"'></i>"); 
     } 

} 

$(document).ready(function() { 
    getLocation(); 
    var unitSwitch = false; 
    $(document).on('click','#iconShow',function() { 
       if(unitSwitch===true){ 
     ausgabeTemp.innerHTML = tempCels + '°C'; 
     unitSwitch = false; 
    }else{ 
     ausgabeTemp.innerHTML = tempFahr + '°F'; 
     unitSwitch = true; 
    } 
      }); 
});

HTML

<body> 
<h1 id="ausgabeLocation" class="text-center"></h1> 
<div id="cont-center" class="box container-fluid box-shadow"> 


    <span id="iconShow" class="icon1" ></span> 
    <div id="ausgabeTemp" class="swapUnit"></div> 
</div> 

</body>

출처

2016-08-25 user2317500

귀하의 문제는 가변 범위입니다. 델리게이트를 클릭하면'getCommer '또는'tempFahr'에 대한 개념이 없으므로'getWeather'의 범위 내에서 선언됩니다. –

@IanBrindley 귀하의 피드백에 감사드립니다. 어떻게 해결할 수 있을까요? 이러한 변수를 클릭 기능에 추가하려면 어떻게해야합니까? – user2317500

@IanBrindley 안녕하세요. 나는 지금 일하고있다. 원래 게시물에서 내 편집을 참조하십시오. 나는 한 가지 질문 만하고있다. 전역 변수를 사용하지 않고 이것이 가능한가요 아니면 전역 변수를 사용해도 괜찮습니까? 당신의 도움을 주셔서 감사합니다. – user2317500

두 번째 문제는 올바른 폐쇄 태그입니다. 다음과 같은 오류지고 그래서이 코드

<div id="ausgabeTemp" class="swapUnit"></h2>

이

<div id="ausgabeTemp" class="swapUnit"></div>

출처

2016-08-25 11:18:39

웃기는 소리, 고마워! – user2317500

로 대체 :

Mixed Content: The page requested an insecure XMLHttpRequest endpoint ' http://api.openweathermap.org/data/2.5/weather?lat=32.647371&lon=35.42155100000001&units=imperial&APPID=af0761262e54344b40ea5757a84f9e81 '. This request has been blocked; the content must be served over HTTPS.

HTTPS 만 전문가 및 엔터프라이즈 계정에서 사용할 수 있습니다. 무료 계정에서는이 기능을 사용할 수 없습니다. 제발, 더 읽으십시오 http://openweathermap.org/price

출처

2016-08-25 11:36:55

이것은 내 문제가 아니지만. API 호출이 파이어 폭스에서 잘 작동합니다. 크롬에 문제가있었습니다. 당신을 위해 동일 할지도 모르다. 어쨌든 그것을보고 주셔서 감사합니다! – user2317500

Javascript Click 기능이 작동하지 않습니다.

답변

관련 문제