0

I have the following HTML and TS code and I get the following error. I am trying to fix it but without any further progress. Could you please help me? I am new to TS and web-development. Error: Property 'value' does not exist on type 'Element'

// TS CODE
const elInput = document.querySelector(`#chat-form-input`)

// add onkeypress listener
document.onkeypress = function (e) {

    // use e.keyCode
    if (e.key === 'Enter') {
      // code for enter
      console.log(elInput)
      console.log(elInput.value) //error
    }
}
<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">
        <input id="chat-form-input" type="text" placeholder="Type a message!"/>
      </div>
    </div>
  </body>
Maciej Sikora
  • 19,374
  • 4
  • 49
  • 50
S.Rucinski
  • 109
  • 1
  • 8
  • 0 type annotations and runtime error means its not TS related question – Maciej Sikora Mar 22 '20 at 23:09
  • Regarding the duplicate, just substitute `HTMLScriptElement` for `HTMLInputElement` in your code – Phil Mar 22 '20 at 23:14
  • I have changed it for: const elInput: HTMLInputElement = document.querySelector(`#chat-form-input`) but I get an error in console "TypeError: elInput is null" – S.Rucinski Mar 22 '20 at 23:52

0 Answers0