js 未捕获的 TypeError：无法读取 null 的属性“addEventListener”

Question

我正在使用 javascript 和 node.js 制作一个聊天应用程序 我已经成功地制作了这个eventListener 并且我收到“无法读取 null 的属性 'addEventListener' ”错误并且我的其他功能都不起作用。
我认为这可能是因为脚本在页面加载之前执行并且已经替换了页面底部的脚本，没有规避。将整个 JS 代码放在一个函数中，该函数将在加载窗口时调用，也不起作用。

  <body>
    <div id="main">
      <h1>chatterbox</h1>
      <label>Room:</label>
      <form>
        <label> name : 
          <input class="input-username" type = "text">
        </label>
        <label> comment :
          <input class="input-chat" type = "text">
        </label>
        <button class="btn-submit">Submit</button>
      </form>
    </div>
    <script src="scripts/app.js"></script>
  </body>
</html>

const $chatterBox = document.createElement('ul');
$chatterBox.classList.add('chatterbox')
const $btnSubmit = document.querySelector('.btn-submit')
const $inputChat = document.querySelector('.input-chat')
const $inputName = document.querySelector('.input-username')


const app = {
  server: 'http://52.78.206.149:3000/messages',
  init: () => {
    app.fetch().then((info) => {
      let results = info.results;
      results.forEach(result => {
        app.renderMessage(result)
      });
      document.querySelector("#chats").append($chatterBox);
    })
  },
  fetch: () => {
    return fetch(app.server)
    .then(resp => resp.json())
  }, 
  send: (data) => {
    return fetch(app.server, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    })
    .then(resp => resp.json())
  },
  clearMessages: () => {
    document.querySelector("#chats").textContent = '';
  },
  renderMessage: (data) => {
    const $li = document.createElement('li');
      $li.classList.add('chat');
      // $li.classList.add(roomname);
    
      const $span = document.createElement('span');
      $span.classList.add('username');
      $span.textContent = data.username;
    
      const $p = document.createElement('p');
      $p.classList.add('chat-content')
      $p.textContent = data.text;
    
      $li.append($span, $p);
      $chatterBox.prepend($li);
      document.querySelector("#chats").append($chatterBox);
  },
  makeNewMessage: () => {
    if (!$inputName.value) {
      alert('name here')
    }
    if (!$inputChat.value) {
      alert('text here!')
    }
    if($inputName.value && $inputChat.value) {
      const data = {
        username: $inputName.value,
        text: $inputChat.value,
        roomname: 'my room'
      }
      app.send(data);
      app.renderMessage(data);
    }
  }
};

app.init()

$btnSubmit.addEventListener('click', app.makeNewMessage, false); // error occurs here

Answer 1

试试：

if ($btnSubmit) {
   $btnSubmit.addEventListener('click', app.makeNewMessage, false);
}