Question

我遇到了问题。我想提取用户输入的信息。在控制台或警报中显示它，但不幸的是，我在浏览器中收到此错误。我已经尝试解决了几个小时，但似乎没有任何效果。我仍然收到错误消息：

 error TypeError: null is not an object (evaluating 'formEl.querySelector')?

let formEl = document.getElementById("chat-form") as HTMLFormElement;
let inputEl = formEl.querySelector("chat-form-input") as HTMLInputElement;
let submitBtnEl = formEl.querySelector("submit-btn") as HTMLButtonElement;


formEl.addEventListener("submit", e => {
    e.preventDefault();
    alert(inputEl.value);
});
inputEl.addEventListener("change", (e:Event|any) => {
    console.log(e.target.value)
})

  <body>
        <div id="chat-container">
          <div id="search-container">
              <input type="text" placeholder="search"/>
          </div>
          <div id="conversation-list">
      
          </div>
          <div id="new-message-container">
            <a href="#" id="test">+</a>
          </div>
          <div id="chat-title">
      
          </div>
          <div id="chat-message-title">
      
          </div>
          <div id="chat-form-container">
            <form id="chat-form">
              <input type="text" id="chat-form-input" placeholder="Type a message!"/>
              <button type="submit" id="submit-btn">send</button>
            </form>
          </div>
        </div>
      </body>

为什么控制台显示typeError？

0 个答案: