2017-12-20 22 views
0

ドキュメントの読み込みが完了した後にJavaScriptを使用してHTMLの段落要素の値を設定しようとしていますが、動作していないようです。赤い下線付き画像から document.readyでJavaScript関数を呼び出す

は、私が示されている:私はすでにGoogleのCDNからjQueryライブラリが含まれている

1)。

2)私はすでに自分の.tsファイルを自分のHTMLファイルにリンクしています。

3)私はすでに "フィラー" script.tsファイルで

<!DOCTYPE HTML> 
<head> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">  <!-- Makes me host Bootstrap --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>  <!-- Not sure if I'll need this --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://use.fontawesome.com/4c5e04f914.js"></script> 
    <script src="http://api.openweathermap.org/data/2.5/forecast?id=524901&APPID={178e8d4180edebe4e2c02fcad75b72fd}"></script> 
    <script src="../js/script.ts"></script> 

</head> 
<body> 
    <div class="jumbotron text-center"> 
     <h1 id="filler">Weather Wizard</h1> 
     <p>Finding your local weather!</p> 
     <!-- Your current location is: --> 
     <p id="currentCity"></p> 
    </div> 
</body> 
</head> 

段落要素のidを設定していることを、私は持っている:

4)は私ののgetLocation()メソッドを呼び出しdocument.readyコールバック関数内で

5)が何かにID = "フィラー" の要素のHTMLを設定しようと

$(document).ready(function() { 
getLocation(); 

/** 
* called when the user clicks the "find weather" button 
* get the user's current location, shows an error if the browser does not support Geolocation 
*/ 
function getLocation(): void { 
    document.getElementById("filler").innerHTML = "is this showing up?"; 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(locationSuccess, locationError); 
    } else { 
     showError("Your browser does not support Geolocation!"); 
    } 
} 

残念ながら、ブラウザでHTMLファイルを読み込むと、id = "filler"のテキストは "これが表示されますか?"

repl.itでも同様のことを試してみましたが、意図どおりに動作します。

https://repl.it/@jonathanwangg/test

私が不足している/間違って何をしているのですか?

+3

コードの画像ではなくコードを投稿してください。 – Intervalia

+0

また、javascriptの代わりにtypescriptにタグを付ける必要があります – zfrisch

+0

イメージをコードに変更してタグを追加しました。希望が役立ちます。 –

答えて

0

お使いのブラウザは、文字コードを認識していません。それは: void部分について文句を言う。ファイルを通常のjavascriptにコンパイルするか、javascriptだけを記述する必要があります。 : voidを削除すると正常に動作するはずです

また、openweathcermap apiをスクリプトsrcとしてロードしないでください。 jQueryをロードしているので、jQuery ajax関数を使用してAPI呼び出しを行うことができます。

+0

タイスクリプトのことを頭にお礼してください。 また、openweathermapをスクリプトsrcとしてロードしないでください。代わりにjQuery AJAXを使用することによる利益または影響 –

+0

openweathermapはオブジェクト内で解決されます。 ''から受け取ったオブジェクトを操作する方法はありませんが、AJAXでは完全に制御することができます。 'var obj = ajaxResponse [2]'のようなものです。 – eltongonc

+0

JSONレスポンスで特定の値を使用しようとしていますが、APIの呼び出しから戻ってきています。私が現在使っているのはjQueryの$ .get()です。これはあなたが意味することですか? –

関連する問題