html - ToDo アプリの「TypeError: null のプロパティ、値を読み取れません」

"TypeError: Cannot read property ,value, of null" in to-do app

簡単にできるアプリの開発に取り組んでいます。予期される動作は、ユーザーがテキスト ボックスに何かを入力し、[作成] をクリックし、リストに追加することです。

代わりに、[作成] をクリックしても何も起こりません。ターミナルではエラーが返されなかったので、Chrome コンソールを見るまでしばらく混乱していました。これは次のことを示しています。

しかし、これが問題の原因だと私が考える部分です:

fetch('/todos/create', {
                    method: 'POST',
                    // body is whatever the user has typed into the description field
                    body: JSON.stringify({
                        'description': document.getElementById('description').value
                    }),
                    // let the server know you're sending JSON
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })

これについて私が見た同様の質問では、まだ存在しないオブジェクトからデータを取得しようとしていることが原因である可能性が高いと言われています。しかし、この場合、私が誤解していない限り、それが存在すると確信しています。

-----------------------------------

セレクターが要素を見つけるだろうと想定しないでください。エラーは、document.getElementById('description') が一致する要素を見つけられないことを意味します。したがって、事実上、null の value プロパティを要求していることになります。

-----

では、それが適切に見つかることを保証するにはどうすればよいでしょうか?

-----

変更:

<input type="text" name="description">

宛先:

<input type="text" id="description">

-----------------------------------