Why does console display typeError?

Question

I am running into the problems. I want to extract user input for ex. display it in console or alert but unfortunately I get this error in my browser. I have been trying to solve it for a few hours but nothing seems to work. I still get an error message:

 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>

Sounds like `#chat-form` doesn't exist at the time you try to select it — CertainPerformance, Mar 23 '20 at 08:36
How can I fix it? Is there something wrong with document.getElementById("chat-form") as HTMLFormElement; ? — Simon Rucinski, Mar 23 '20 at 08:40
The typing is wrong too - the element doesn't exist. See the linked question — CertainPerformance, Mar 23 '20 at 08:42
I have fixed the typing but I still get an error. I have ready the whole post and updated script to "window.onload" to make sure that it loads data and changed getElementById('chat-form') and formEl.querySelector("#my-input") but it still does not work :(( — Simon Rucinski, Mar 23 '20 at 09:07

Why does console display typeError?

0 Answers0