質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
GitHub

GitHubは、Gitバージョン管理システムを利用したソフトウェア開発向けの共有ウェブサービスです。GitHub商用プランおよびオープンソースプロジェクト向けの無料アカウントを提供しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1255閲覧

githubでJavascriptが実装されない。(Weatherアプリ)

yugi

総合スコア7

GitHub

GitHubは、Gitバージョン管理システムを利用したソフトウェア開発向けの共有ウェブサービスです。GitHub商用プランおよびオープンソースプロジェクト向けの無料アカウントを提供しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/11/29 11:41

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}

イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ku__ra__ge

2021/11/29 11:53

「Githubを通す」の意味がわかりません。Githubに対してどのような操作を行ってページを表示しようとしているのかを具体的に書いてください。
cx20

2021/11/29 12:40

おそらく GitHub Pages のことかと思います。 ブラウザのコンソールに何かエラーが出ていませんか?
yugi

2021/11/29 13:56

Github pagesについてでした。
guest

回答2

0

ベストアンサー

http:// の個所を https:// に変えて試してみて下さい。

投稿2021/11/29 12:52

cx20

総合スコア4633

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

たんに管理対象になってないファイルがあるって話なんでは
Git/Githubはファイル管理してるだけで、コードの実行には関わりありません

投稿2021/11/29 11:46

y_waiwai

総合スコア87749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問