Cannot read properties of undefined というエラーについて

こんにちは、始めて質問させていただきます。

Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener')
というエラー文で苦戦しています。

 const taskValue = document.getElementsByClassName('task_value')[0];
 const taskSubmit = document.getElementsByClassName('task_submit')[0];
 const tasklist = document.getElementsByClassName('task_list')[0];

  const addTask = (task) => {
  const listItem = document.createElement('li');
  const showItem = taskList.appendChild(listItem);
  showItem.innerHTML=task;

  const deleteButton = document.createElement('button');
  deleteButton.innerHTML= 'Delete';
  listItem.appendChild(deleteButton);

  deleteButton.addEventListener('click', evt=> {
      evt.preventDefault();
      deleteTasks(deleteButton);
  });
};

const deleteTasks = (deleteButton) =>{
    const chosenTask = deleteButton.closest('li');
    taskList.removeChild(chosenTask);
};

taskSubmit.addEventListener('click', evt => {
    evt.preventDefault();
    const task = taskValue.value;
    addTasks(task);
    taskValue.value = '' ;
});

エラー文を見てみると、下から5行目の　taskSubmit.addEventListener('click', evt => {
という部分に問題があるみたいで、色々書き換えてみたのですが、うまく動きません、、

int32_t

2022/05/16 00:31

HTMLも開示してください

airi2022

2022/05/16 00:43

<!DOCTYPE html>> <html lang="en"> <head> <meta charset="UTF-8"> <title>TODO-List</title> <link rel="stylesheet" href="styles.css"> <script type="text/javascript" src="script.js"></script> </head> <body> <h1>TODO-List</h1> <form> <input class="task_value" type="text" /> <button class="task_submit" type="button">Add Task</button> </form> <div id="table"> <h2>Current Tasks</h2> <ul class="task_list"></ul> </div> </body> </html>

airi2022

2022/05/16 00:43

こちらでお願い致します！

hoshi-takanori

2022/05/16 00:49

script.js が読み込まれる段階ではまだ <button class="task_submit" ... が存在しないからでしょうね。 script タグに defer を付けるとか？ https://qiita.com/N0S0/items/b0eb88ae0bc21cf2dfca

行動規範の内容に同意します

回答3件

html
1<script type="text/javascript" src="script.js"></script>
2...
3<button class="task_submit" type="button">Add Task</button>

JavaScriptコードは <button class="task_submit" がパーズされてDOMができるより前に実行されるため、document.getElementsByClassName('task_submit') の結果は空になります。

対処方法はいろいろあります。

<script> を <button class="task_submit"> より下に移動する
JavaScriptコード全体を DOMContentLoaded イベントリスナで囲む
<script> に defer 属性を付ける
task_submit ではなく document にイベントリスナを付ける

js
1documente.addEventListener('click', evt => {
2  if (evt.target.closest('.task_submit')) {
3    evt.preventDefault();
4    const taskValue = document.getElementsByClassName('task_value')[0];
5    const task = taskValue.value;
6    addTasks(task);
7    taskValue.value = '' ;
8  }
9});