ドキュメントの読み込みが完了した後に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
私が不足している/間違って何をしているのですか?
コードの画像ではなくコードを投稿してください。 – Intervalia
また、javascriptの代わりにtypescriptにタグを付ける必要があります – zfrisch
イメージをコードに変更してタグを追加しました。希望が役立ちます。 –