チャット送信時に送信された文字がテキストボックスに残ってしまう。（Ajax使用）

Question

Ajaxを用いてチャットアプリを作成しています。

テキストボックスに文字を入力後、送信表示はできるのですが文字がテキストボックスに残留してしまいます。

ご教授いただけると嬉しいです。

const form = document.querySelector(".typing-area"),
inputField = form.querySelector("input-field"),
sendBtn = form.querySelector("button"),
chatBox = document.querySelector(".chat-box");

form.onsubmit = (e) =>{
    e.preventDefault();
} 

function scrollToBottom(){
  chatBox.scrollTop = chatBox.scrollHeight;
}

sendBtn.onclick = ()=>{
    let xhr = new XMLHttpRequest();
    xhr.open("POST", "/FriendsViews/insert-chat.php", true);
    xhr.onload = ()=>{
      if(xhr.readyState === XMLHttpRequest.DONE){
          if(xhr.status === 200){
              inputField.value = "";
              scrollToBottom();
          }
      }
    }
    let formData = new FormData(form);
    xhr.send(formData);
    
}

<form action="#" class="typing-area" autocomplete="off" method="POST">
            <input type="text" name="outgoing_msg_id" value="省略" hidden>
            <input type="text" name="incoming_msg_id" value="省略" hidden>
            <input type="text" class="input-field" name="msg" placeholder="メッセージを入力">
            <button type="button"><i class="fas fa-paper-plane"></i></button>
        </form>

Answer 1

送信すると、ブラウザの開発者ツールのコンソールにエラーが出ますよね。

inputField = form.querySelector("input-field"),

".input-field" ではないでしょうか。

Comments

[alyssa703957]

解決できました。
些細なミスでした、ありがとうございます！