jsの削除処理を簡潔に書きたい。

Question

前提・実現したいこと

「登録する」ボタンを押したらフォームの中身をすべて空にしたいです。
JavaScriptで作成することは出来たのですが、もっと簡潔に書くことは出来ないでしょうか？

発生している問題・エラーメッセージ

    <table class="form" id="form">
        <tr>
            <th>予定</th>
            <td><input id="todo" type="text" placeholder="予定を入力"></td>
            <th>日時</th>
            <td><input id="date" type="datetime-local"></td>
        </tr>
        <tr>
            <th>お金</th>
            <td><input id="price" type="number" placeholder="金額を入力"></td>
            <th>期日</th>
            <td><input id="duedate" type="datetime-local"></td>
        </tr>
        <tr>
            <th>持ち物</th>
            <td><input id="item" type="text"></td>
            <th>メモ</th>
            <td><input id="memo" type="text"></td>
        </tr>
    </table>
    <div id="addButton"><button type="submit">登録する</button></div>

        登録後のフォームリセット
        let formElement = document.getElementById('todo'); formElement.value = "";
        let formElement = document.getElementById('date'); formElement.value = "";
        let formElement = document.getElementById('price'); formElement.value = "";
        let formElement = document.getElementById('duedate'); formElement.value = "";
        let formElement = document.getElementById('item'); formElement.value = "";
        let formElement = document.getElementById('memo'); formElement.value = "";

補足情報

ここにより詳細な情報を記載してください。

Answer 1

とりあえずリセットの方はコンパイルエラーなので、そこは直しましょう。

単純に Formタグが無いしform.reset()をしたい…訳でもないのかな。
質問の要件としてはdocument.querySelectorAll()を使うのが近いですかね。

Document.querySelectorAll()
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

方針

• 対象のタグをリストとして取得する
• リストをforループ等で回してvalueに空文字を入れる

ヒント

querySelectorAll()でidを指定する場合は、#を付けます。
また、or条件を付ける場合は、,（カンマ）で区切ります。

こんなHTMLがある時に

<div>
  <p id="hoge">ほげ</p>
  <p id="fuga">ふが</p>
  <p id="piyo">ぴよ</p>
</div>
<button onclick="test()">push!</button>

このようなスクリプトを記述すると

function test() {
  const elements = document.querySelectorAll('#hoge, #fuga');
  elements.forEach(element => {
    console.log(element.textContent); // ここにリセット処理を書けば出来そうですね
  });
}

pushボタンを押下した時はコンソールにこのように出てきます。

ほげ
ふが

Answer 2

サブミットすれば基本的にはページ遷移しますので
値をクリアすること自体が意味がないと思います

Comments

[neonemo]

言われてみればそうですね。

気になってちょっと試してみたんですが、Win版Chromeの場合は
formタグが無い場合はsubmit属性のボタン押下時に特に動きはなさそうです。
タグありはaction属性値へ遷移。タグありでもaction属性が無い場合は404。
まあ、HTMLの構成は質問者さんのみぞ知るという事で。