inputタグに入力した値が消去リセットできない

はじめに

今回はJavascriptを用いてToDoアプリの作成に取り組みました。
仕様としては、inputタグにToDoを入力して「追加ボタン」をクリックすると、inputタグに入力したテキストはリセットされて、未完了のToDoに項目が追加されるといった仕様です。
ですがinputタグに入力したテキストがリセットされずに残ってしまう、といったエラーに直面しました。
ここでは実際のコードと、解決方法を記載します！

問題

<input id="add-text" placeholder="TODOを入力">
    <button id="add-button">追加</button>

const addButton = document.querySelector("#add-button");

const onClickAdd = () =>{
  //テキストの追加と消去
  const inputText = document.querySelector("#add-text").value;
  inputText = "";

上記のコードでhtmlの「追加ボタン」をクリックするとinputのvalueが空のテキスト("")に書き換わり、リセットされるという動きを想定していました。
しかしボタンをクリックしてもinputタグのvalueはリセットされませんでした。

解決策

const addButton = document.querySelector("#add-button");

const onClickAdd = () =>{
  //テキストの追加と消去
  const inputText = document.querySelector("#add-text");
  inputText.value = "";

こちらのコードで解決しました。
変更した点は
const inputText = document.querySelector("#add-text").value;こちらのコードを
const inputText = document.querySelector("#add-text");こちらに変更。

inputText = "";こちらのコードを
inputText.value = "";こちらに変更しました。

変更前だとDOMを取得したのではなく、inputタグに入力されたテキストを取得しただけ。
ex)入力した値が「テスト」だとするとinputText = "テスト";になっている。
その後にinputText = ""としても「テスト」という言葉が「」空も文字になるだけで、inputのvalueは変わらない。

変更後はDOMをまず取得してinputText.value = "";のコードで取得したDOMのvalueにアクセスしている。

まとめ

説明が難しかったのですが、constで要素を取得する時には、DOM操作のみで留めておこうと思いました。