javascriptを外部から読み込むときに正常に処理されない

html内でjavascripを書いた場合は、id名「main__filter--txt」を取得することができ、「<span class="main__filter--txt dp--none" id="main__filter--txt">人生の一瞬をspecialにする体験を</span>」を出力できます。

しかし、外部のファイルからの場合は上記のことができないです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8">
5        <meta name="viewport" content="width=device-width, initial-scale=1.0">
6        <meta http-equiv="X-UA-Compatible" content="ie=edge">
7        <title>Document</title>
8        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">						
9        <link rel='stylesheet' href='style.css'>
10        <script type="text/javascript" src="main.js"></script>				
11    </head>
12    <body>
13        <main class="main">
14            <div class="main__filter">
15　　　　　　　　<span class="main__filter--txt dp--none" id="main__filter--txt">人生の一瞬をspecialにする体験を</span>
16　　　　　　　</div>
17        </main>
18        <script>
19            console.log(document.getElementById("main__filter--txt"));
20        </script>
21    </body>
22</html>

js
1(function() {
2    `use strict`;
3    
4    let filter = document.getElementById("main__filter--txt");
5    console.log(filter);
6    console.log(document.getElementById("main__filter--txt"));
7
8})();

現在javascriptを勉強中で初歩的なことになりますが、ご回答頂ければ幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

文書がまだ読み込まれていないときにjavascriptが実行されていることが問題の原因です。
以下のように、文書の読み込みと解析が完了したタイミングで処理を実行するようにしましょう。

javascript
1(function() {
2    `use strict`;
3
4    document.addEventListener("DOMContentLoaded", function() {
5        let filter = document.getElementById("main__filter--txt");
6        console.log(filter);
7        console.log(document.getElementById("main__filter--txt"));
8    });
9
10})();