天気アプリのウェブページにデータが表示されていません

私は最近天気アプリを作り続けています。私は自分のコードと気温をテストしました。現在の天気の国と解説は表示されていません。私は問題が私のhtml geolocation関数の後に始まると思う。私は関数が何らかの形で天気予報データを解析できないと感じています。天気アプリのウェブページにデータが表示されていません

私のコードは、ダウン下にここにある：

$(document).ready(function(){ 

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


    function showPosition(position) { 
var lat = "lat= " + position.coords.latitude; 
var lon = "lon= " + position.coords.longitude; 
getWeather(lat,lon); 
    } 

    function getWeather(lat,lon){ 
var urlstring = "https://fcc-weather-api.glitch.me/api/current?" + lat + "&" + lon; 
$.ajax({ 
    url : urlstring, 
    dataType : "jsonP", 
    success : function(data){ 
     var temp = data.main.temp; 
     var desc = data.weather[0].description; 
     var country = data.sys.country; 
     $("#desc").html(desc); 
     $("#temp").html(temp); 
    } 
}) 
    } 

    var ctof = $("#c/f").click(function(){ 
    var cel = Math.round((temp - 32) * 5/9); 
    var faren = Math.round((temp * 9/5) + 32); 
    if(ctof == true){ 
     $("#temp").html(faren); 
     } 
     else{ 
     $("#temp").html(cel); 
     } 
     }) 
    });

は、私もちょうど参照

<!DOCTYPE html> 
<html> 
<head><title>Web App</title></head> 
<body> 
<div class="container"> 
    <div class="row"> 
    <header class="col-xs-12 text-center"> 
     <h1>Free Code Camp </h1> 
     <h1>Weather App</h1> 
    </header> 

    <div class="col-xs-8 col-xs-offset-2"> 
     <div class="text-center status"> 
     <p><span id="city"></span> <span id="country"></span></p> 
     <p><span id="temp"><button id="#c/f">C/F</button></span></p> 
     <p id="desc"></p> 
     </div> 
    <div class ="info"> 
<div class="develop">Developed by = Shumaila Bi Shaikh</div> 
<div class="langs">Created by: HTML,CSS,ANGULARJS</div> 
</div> 

<script src="Weather.js"></script>

出典

2017-08-29 shaikh95

を：そのために行を変更します。 https://jsfiddle.net/bokav0z8/1/を参照してください。問題はHTML構造である可能性があります。 – Luka

@Lukaはい、そうです。そしてボタン**＃c/f ** ??? – gaetanoM

はあなたがconsole.log(desc)てみました酒やのあなたの他の部分のための私のHTMLコードが含まれていますデータ？

$("#desc").html(desc); 
    $("#temp").html(temp);

この意志：このような

行...私はあなたが必要な配列を取得している疑いがある、しかし、あなたは直接動作しませんあなたのhtml、にこれらの配列を追加しようとしています<p>Hello</p>のような有効なHTML文字列を渡さない限り動作しませんが、この場合は配列を渡しています。データを実際にどのように表示するかをマップしてから、.html()コールに渡す必要があります。この

let descString = ""; 
desc.forEach(value => descString += "<p>" + value.something + "</p>") 
$("#desc").html(descString)

出典

2017-08-29 17:45:18

あなたの問題のように見えることができ、あなたのデータ構造に基づいて

は、この行である：あなたがCSS表記で使用されている文字を持つ要素を選択する必要が

var ctof = $("#c/f").click(function() {

ますの接頭辞として\\をエスケープする必要があります。詳細はdocsを参照してください。

したがって、あなたが記述する必要があります。

var ctof = $("\\#c\\/f").click(function(){

第二の問題は、この行である：

<p><span id="temp"><button id="#c/f">C/F</button></span></p>

あなたはdata.main.tempを取得すると、あなたが上書きので削除ボタン。これはフィドルに働く

にこのanswerに示すようにあなたがそれを有効にする必要がChromeでジオロケーションを有効にするためには

<p><span id="temp"></span><button id="#c/f">C/F</button></p>

fiddle

出典

2017-08-29 17:51:56 gaetanoM

天気アプリのウェブページにデータが表示されていません

答えて

関連する問題