JavaScriptのid取得時のエラー対処法

前提・実現したいこと

java script初心者です
『本当によくわかるJavaScriptの教科書』という本にならい疑似チャット欄の作成をしようとしていたのですがchat-sendのidを取得するとき以下のメッセージが出てうまくいきません。
おそらくgetElementByIdする際に何も持ってこれてないのだろうと思うのですが、htmlにはしっかりと該当するidがあるのになぜでしょう。ご指摘のほどよろしくお願いします。

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot read property 'addEventListener' of null

該当のソースコード

HTML5
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1">
6  <title>js-tr</title>
7  <link rel="stylesheet" href="stylesheet.css">
8</head>
9<body>
10  <div class = "chat-window">
11    <div class = "chat-window-inner">
12      <ul id = "chat-list"></ul>
13    </div>
14    <div class = "chat-input-area">
15      <input type="text" id="chat-input">
16      <input type="button" value="送信"　id="chat-send">
17    </div>
18  </div>
19  <script src="script.js"></script>
20</body>
21</html>
22
23JavaScript
24
25let answer = ['ふむふむ','あーね','理解','それな','草'];
26function addChatText(val, type){
27    if(!val) return false;
28}
29function addChatText(val,type){
30    let text = document.createElement('li');
31    text.innerHTML = val;
32    if(type === "other"){
33        text.classList.add('message-other');
34    }
35    let chatWindow = document.getElementById('chat-list');
36    chatWindow.appendChild(text);
37}
38
39
40let $chatSend = document.getElementById('chat-send');
41
42$chatSend.addEventListener('click',function(){
43    let inputText = document.getElementById('chat-input');
44    addChatText(inputText.value,'you');
45    inputText.value = '';
46});
47
48setInterval(() => {
49    let index = Math.floor(Math.random() * answer.length);
50    addChatText(answer[index],'other');
51}, 8000);
52
53setTimeout(function(){
54    addChatText('こんにちは','other');
55},1000)
56
57