HTMLでJavaScript外部ファイルを読み込めない

タイトルの通りです。
consoleだけの記述だと表示されているので、
読み込めていないわけでもなさそうですが、
クリックイベントを追加し、関数にすると動作しなくなります。
エラーは一歳ありません。

⬇️こちらは表示されます。

JavaScript
1console.log('Hey')
2console.log('you!')

⬇️関数にすると表示されません。
JSFiddleで検証しましたが、
そちらでは動作しました。

JavaScript
1document.getElementById("header-hamburger").addEventListener("click", function() {
2  console.log('hey')
3})

⬇️buttonをクリックしたらconsoleを表示させたいです。
idコピペしたので間違いなし、
button自体は
width: 100px; height: 100px;にしており
擬似要素のcontentでborderを使用しています。

html
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
2<html lang="ja">
3
4<head>
5  <title>Title</title>
6  <meta charset="utf-8"/>
7  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
8  <!-- <link rel="icon" href="favicon.ico"> -->
9  <meta name="description" content="検索された時に表示されるタイトル">
10  <link rel="stylesheet" href="app.css">
11  <link rel="stylesheet" href="color.css">
12  <link rel="stylesheet" href="reset.css">
13  <meta http-equiv="Content-Script-Type" content="text/javascript">
14</head>
15
16<body>
17  <header class="header">
18    <div class="header-container">
19      <button id="header-hamburger"></button>
20    </div>
21  </header>
22  <script src="index.js"></script>
23</body>
24</html>

css
1/* nav-header */
2.header {
3  position: fixed;
4  padding: 0 18px;
5}
6
7.header-container {
8  display: flex;
9  justify-content: flex-end;
10}
11
12#header-hamburger {
13  width: 76px;
14  height: 76px;
15  position: relative;
16}
17
18#header-hamburger::before,
19#header-hamburger::after {
20  content: '';
21  position: absolute;
22  right: 50%;
23  bottom: 50%;
24  width: 32px;
25  height: 2px;
26  background-color: var(--color-stroke-default);
27}
28
29#header-hamburger::before {
30  transform: translate(50%, 50%) translateY(-5px)
31}
32
33#header-hamburger::after {
34  transform: translate(50%, 50%) translateY(5px)
35}
36

【試したこと】
1.外部ファイルではなくhtml内のscriptに移動
しかしエラーになったため、2を実行
Uncaught TypeError: Cannot read property 'addEventListener' of null
at index.html:15

html
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
2<html lang="ja">
3
4<head>
5  <title>Title</title>
6  <meta charset="utf-8"/>
7  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
8  <!-- <link rel="icon" href="favicon.ico"> -->
9  <meta name="description" content="検索された時に表示されるタイトル">
10  <link rel="stylesheet" href="app.css">
11  <link rel="stylesheet" href="color.css">
12  <link rel="stylesheet" href="reset.css">
13  <meta http-equiv="Content-Script-Type" content="text/javascript">
14  <script>
15    document.getElementById('header-hamburger').addEventListener('click', function() {
16      document.getElementById('header-hamburger').classList.add('toggle')
17    })
18  </script>
19</head>
20
21<body>
22  <header class="header">
23    <div class="header-container">
24      <button id="header-hamburger"></button>
25    </div>
26  </header>
27  <script src="index.js"></script>
28</body>
29</html>

2.DOMContentLoadedを使用
htmlファイルscript内と
外部jsファイルindex.js両方で試しましたが
動作しませんでした。

JavaScript
1document.addEventListener('DOMContentLoaded', function() {
2  document.getElementById("header-hamburger").addEventListener("click", function() {
3    console.log('hey')
4  })
5})

3.Chrome設定を確認
JavaScriptは有効になっていました。

itagagaki

2021/07/04 10:30

alert('hey');でも動作を確認できませんか？

mogumogu0u0

2021/07/04 10:33

はい、こちらでも確認できませんでした。 document.addEventListener('DOMContentLoaded', function() { document.getElementById("header-hamburger").addEventListener("click", function() { alert('hey') }) })

itagagaki

2021/07/04 10:36

試したこと1で<head>内に書いた<script>～</script>を、</body>の直前に置いてみたらどうでしょうか。DOMContentLoadedは使わずに。

mogumogu0u0

2021/07/04 10:43

やってみましたが、こちらも動作しませんでした。 alert("hey")でもconsole.log("hey")でも同様です。 <body> <header class="header"> <div class="header-container"> <button id="header-hamburger"></button> </div> </header> <script> document.getElementById('header-hamburger').addEventListener('click', function() { alert('hey'); }) </script> </body>

itagagaki

2021/07/04 10:48

試してみましたがこちらでは普通に動きますね。ということは何か環境の問題ですかね。どういう環境で試されましたか？

mogumogu0u0

2021/07/04 10:53

わざわざ試してくださったんですね！ありがとうございます！環境…Chromeでindex.htmlを開いて確認しています。 file:///Users/hogehoge/myfile/fig/index.html 念の為Chromeを最新バージョンにしましたが、そちらは関係なさそうです。