2017-10-18 10 views
0

私はフリーコードキャンプ用の天気予報アプリを使っていますが、なぜボタンが摂氏から華氏に温度を変えないのか分かりません。 私はそれが変数の回復のための問題だと思うが、私はどこがわからない。 私のコードでいくつかの変更を試みますが、私は周りを円で囲むだけです。私の機能が気温を摂氏から華氏に変えない理由を見つけられない

これは私のjavascriptです:

$(document).ready(function(){ 


var long; 
var lat; 
var celsius; 
var fahrenheit; 


    navigator.geolocation.getCurrentPosition(function(position){ 

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


var url = 'http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+long+'&lang=fr'+'&units=metric&appid=d475e2ed504ab40f4de6c1b3cba9ebcc'; 

$.getJSON(url, function(data){ 
var weatherType = data.weather[0].description; 
var windSpeed = data.wind.speed; 
var icon = data.weather[0].icon; 
var city = data.name; 
var country = data.sys.country; 
var description = data.weather[0].description; 
var celsius = data.main.temp; 
var fahrenheit = celsius * 9/5 +32; 
var Temp = celsius; 

$('.card').html(city + '<br> Temp: '+Temp+' °C'+ '<br> Wind Speed:'+windSpeed+'M/s'); 
$('.icon').html('<img src="http://openweathermap.org/img/w/' + icon + '.png" /> ' + '<br>'+weatherType); 

function change() { 
    if (Temp == 'fahrenheit') { 
     Temp = 'celsius'; 
    } else if (Temp == 'celsius') { 
     Temp = 'fahrenheit'; 
    } 
$('.btn').on('click', function() { change(); }) 

console.log(city); 
    console.log(weatherType); 
    console.log(windSpeed); 
    console.log(icon); 

     }; 
     }) 
    }) 
    }); 

とHTML:

<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/app.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
</script> 

    <title>Weather App</title> 

</head> 
<body> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div class='col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3 weather' > 
     <div class="col-sm-6 text-center card"> 
     </div> 
     <div class="col-sm-6 text-center text-uppercase icon"> 
     </div> 
     <button type="button" class="btn degree">°C/°F</button> 
     </div> 
    </div> 
    </div> 
    <div class="text-center footer">by<a href="http://codepen.io/Th13um/"> Mathieu Dupré-Fontana</a> 
    </div> 
<script src="js/app.js"></script> 

誰かが私を助けてくださいことはできますか?

Ps:私の悪い英語で申し訳ありません、私はフランス語です。

+0

'celsius'は数値ではなく文字列であるように見えます – guest271314

答えて

1

celsiusの数であるように見える、Tempcelisusの値に設定されていない文字列、Tempの数に設定されている、いない文字列

var celsius = data.main.temp; 
var fahrenheit = celsius * 9/5 +32; 
var Temp = celsius; 

Temp"fahrenheit"と等しくならない、または"celcius"機能change

function change() { 
    if (Temp == 'fahrenheit') { 
    Temp = 'celsius'; 
    } else if (Temp == 'celsius') { 
    Temp = 'fahrenheit'; 
    } 
} 
.html()change()楽しみ内で呼び出されるべき

予想される結果が、要素でclickのHTMLでCelciusとFahrenheitレンダリングを切り替えることである場合、

関連する問題