Q&A
とりあえず、コメントっぽい「//外部ジャバの読み込み」の部分は修正してください。
JavaとJavaScriptは別物です。メロンとメロンパンぐらいは違います。
ヒント: https://eng-entrance.com/java-javascript
前提・実現したいこと
とても初歩的なことです。ジャバスクリプトを学び始めた者なのですが、innerHTMLについて質問させていただきます。
.jsを外部ファイルとしてscript srcで読み込んだ場合、innerHTMLがページに反映されません。
HTMLに直接書き込んだ場合、問題なく動作します。
インターネットで検索かけても、妥当なウェブページが見つかりません。
何か外部ファイルで書き込む時のコードの違い等あったら指摘して頂きたいです。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>テスト</title> 6 <script src="index1.js"></script> //外部ジャバの読み込み 7</head> 8<body> 9 <h1 id="test"></h1> 10</body> 11</html>
Javascript
1var test = document.getElementById("test"); 2test.innerHTML = "やっほー";
これだと問題なく反映されます
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>index1</title> 8 <script src="index1.js"></script> 9</head> 10<body> 11 <h1 id="test"></h1> 12 <script> //ここで記述すると問題がなくテキストが表示される 13 var test = document.getElementById("test"); 14 test.innerHTML = "やっほー"; 15 </script> 16</body> 17</html>
「初心者アイコン」をつけてください。
タイトルや本文にその旨は不要です。
回答2件
0
コードは上から順番に実行されるので、JavaScriptが実行されるタイミングで読み込まれていない要素はundefinedとなります。
コンテンツ読み込み後に実行するようにタイミングを調整してください。
- </body>の直前に置く
- DOMContentLoaded などロードイベントを挟む
投稿2021/09/25 11:24
総合スコア80861
0
.jsを外部ファイルとしてscript srcで読み込んだ場合、innerHTMLがページに反映されません。
そういう仕様です。
JavaScriptを読み込む場所がtestより上なので、JavaScriptを実行する段階では対象のエレメントが見つからないだけです。
投稿2021/09/25 10:42
編集2021/09/25 10:50
総合スコア145208
あなたの回答
tips
プレビュー
