inputタグのvalueの値を取得したい。

Question

やりたいこと

inputタグのvalueの値を取得したい。

エラーメッセージ

Uncaught TypeError: Cannot read properties of null (reading 'value')

ソースコード

<input type="text" class="form-control"　id="checklistInput" name="checklist[]"  value="タイトル入力してください。" />

let $userInput = document.getElementById('checklistInput').value;

試したこと

DOM が構築される前に要素を引っ張ってこようとして失敗している可能性があるという記事を参考に
以下2つとも試しましたがいずれも同じエラーがでました。

１、DOMの読み込みを待つ

document.addEventListener('DOMContentLoaded', () => {
  let $userInput = document.getElementById('checklistInput').value;
});

2、スクリプトの読み込みをbodyの末尾にする。（元々末尾で読み込んでいました。）

補足情報

Laravel バージョン　Framework 8.64.0　のbladeでの開発です。

Answer 1

<!--                                   ↓ 全角空白なので半角にしましょう。      -->
<input type="text" class="form-control"　id="checklistInput" name="checklist[]"  value="タイトル入力してください。" />

Comments

[HIRO46969756]

イージーミスに気づけなくてお恥ずかしいです。
解決いたしました。ありがとうございます。

Answer 2

chromeのdevtoolのconsoleタブで実行してみたら取れますか？

document.getElementById('checklistInput').value;

読み込みタイミングなら、こちらで試してください。

window.onload = () => {
  let $userInput = document.getElementById('checklistInput').value;
}