GithubでWeatherアプリのリポジトリ作成を行っています。
アプリは、各地の天気を選択肢すると、現在の気温・湿度が表示される仕組みになっています。
JavascriptのみCodeが実装されません。
同Codeはブラウザ上ではJavascriptが実装されるのですが、Githubを通すとブラウザでは
画像のClickを押しても気温・湿度の表示がされません。
解決策のご教授をいただければと思います。
html
1 2<!DOCTYPE html> 3<html lang="ja"> 4<head> 5<title>あなたの地域のお天気</title> 6<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 7<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 8<script src='https://use.fontawesome.com/releases/v5.0.13/js/all.js'></script> 9<link rel="stylesheet" href="weather.css"> 10</head> 11<body> 12 <div class="container"> 13 <h1>各地のお天気は?</h1> 14 <div> 15 <h2>都市の選択</h2> 16 <input type="radio" id="cityRadio" name="cityRadio" value="1850147">Tokyo 17 <input type="radio" id="cityRadio" name="cityRadio" value="7839805">Melbourne 18 <input type="radio" id="cityRadio" name="cityRadio" value="1261481">New Delhi 19 <input type="radio" id="cityRadio" name="cityRadio" value="292968">Abu Dhabi 20 <input type="radio" id="cityRadio" name="cityRadio" value="524901">Moscow 21 <input type="radio" id="cityRadio" name="cityRadio" value="2643743">London 22 <input type="radio" id="cityRadio" name="cityRadio" value="2172797">Cairns 23 <button id="submit"><i class="fas fa-paper-plane"></i> Click</button> 24 </div> 25 <div class="weatherMain"> 26 <h2>現在の天気は</h2> 27 <div><span id = "weather" class="bold"></span></div> 28 <div><span id = "weatherMark" class="bold"></span></div> 29 <p id="icon"></p> 30 </div> 31 <div>気温 <span id = "temp" class="bold"></span> ℃</div> 32 <div>湿度 <span id = "humidity" class="bold"></span> %</div> 33 </div> 34 <script> 35 $(document).ready(function() { 36 $("#submit").click(function (e) { 37 //JSONデータ取得 日本語で天気名を表示したいのでlang=ja として日本語表記データを取得 38 $.post("http://api.openweathermap.org/data/2.5/weather?id=" + $("input[id='cityRadio']:checked").val() + "&appid=cc05750ba50400f27ebabbcd6f4c4976&lang=ja&units=metric", 39 function(json){ 40 $("#weather").html(json.weather[0].description); 41 $("#humidity").html(json.main.humidity); 42 //lang=jaにすることで華氏から摂氏に変換することなく摂氏表示となる。小数点だけ丸める処理をする 43 $("#temp").html(Math.round(json.main.temp)); 44 45 //天気に応じた天気アイコンを表示させる 46 switch (json.weather[0].main){ 47 case 'Clouds': 48 $("#weatherMark").html("<img src='http://openweathermap.org/img/w/04d.png' >"); 49 break; 50 case 'Snow': 51 $("#weatherMark").html("<img src='http://openweathermap.org/img/w/13d.png' >"); 52 break; 53 case 'Rain': 54 $("#weatherMark").html("<img src='http://openweathermap.org/img/w/09d.png' >"); 55 break; 56 case 'Clear': 57 $("#weatherMark").html("<img src='http://openweathermap.org/img/w/01d.png' >"); 58 break; 59 case 'Fog': 60 $("#weatherMark").html("<img src='http://openweathermap.org/img/w/50d.png' >"); 61 break; 62 case 'Mist': 63 $("#weatherMark").html("<img src='http://openweathermap.org/img/w/50n.png' >"); 64 break; 65 case 'Haze': 66 $("#weatherMark").html("<img src='http://openweathermap.org/img/w/50d.png' >"); 67 break; 68 default: 69 $("#weatherMark").html("<img src='http://openweathermap.org/img/w/01n.png' >"); 70 } 71 } 72 ); 73 }); 74 }); 75</body> 76view raw
CSS
1body { 2 color: #002222; 3 background-color: papayawhip; 4 text-align: center; 5} 6 7img{ 8 width: 100px; 9} 10 11.container{ 12 padding-left: 20%; 13 padding-right: 20%; 14} 15input { 16 margin: 2%; 17} 18 19#submit{ 20 margin-left: 10px; 21} 22 23.bold{ 24 font-weight: bold; 25 font-size: 1.5em; 26}
回答2件
あなたの回答
tips
プレビュー