javascript - Hvordan få tilgang til skjemadata som er nestet inne i div-er (TypeScript)

I følgende kode ønsker jeg å få tilgang til brukerdata skrevet i et skjema hver gang brukeren trykker på enter-tasten etter å ha skrevet inn noen tekstdata i et inputfelt i chat-skjemaet. Har du noen idé om hvordan jeg kan få tilgang til følgende tekstdata ved å bruke TypeScript? Jeg har allerede prøvd med jQuery, men ingen av de testede kodene ser ut til å fungere. Jeg er ny innen webutvikling, men veldig ivrig etter å lære nye ting.

<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">
    <input id="chat-form" type="text" placeholder="Type a message!" />
  </div>
  
</div>

Svar #1

Først bør du bruke semantisk HTML ved å bruke form-taggen i stedet for div, slik at du kan bruke enter-tasten for å håndtere sendingshandlinger. For det andre er det ikke en passende måte å duplisere en id for to forskjellige elementer, fordi id er en unik identifikator for elementet. Til slutt, her er et enkelt skjema som kan være nyttig. HTML:

<form id="my-form">
  <input type="text" id="my-input" />
  <button type="submit" id="submit-btn">send</button>
</form>

JS :

const formEl = document.getElementById("my-form") as HTMLFormElement;
const inputEl = formEl.querySelector("my-input") as HTMLInputElement;
const submitBtnEl = formEl.querySelector("submit-btn") as HTMLButtonElement;
formEl.addEventListener("submit", e => {
    e.preventDefault();
    // do what you want
});
inputEl.addEventListener("change", (e:Event|any) => {
    console.log(e.target.value)
    // do what you want
})

Svar #2

Før svaret: du har duplisert id="chat-form"

<div id="chat-form">
  <input id="chat-form"type="text" placeholder="Type a message!"/>
</div>

Eksempel

// select element
const elInput: HTMLInputElement = document.querySelector(`#chat-form-input`)

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

    // use e.keyCode
    if (e.key === 'Enter') {
      // code for enter
      console.log(elInput)
      console.log(elInput.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">
      <input id="chat-form-input" type="text" placeholder="Type a message!"/>
    </div>
  </div>
</body>

Relaterte artikler