関数内で配列にアクセスするには？

Jeknar：

私は、リストのアプリを実行するために私に取り組んでいます。それのほとんどは罰金を動作しますが、私はまだこの問題（キャッチされない例外TypeError：未定義のプロパティを読み取ることができません）を取得します。私はまだ理解できない何らかの理由で、私は配列を渡すことはできませんtoDoListしsearchList、私のダイナミックな検索機能に関連する要素をフィルタリングするために機能。うの誰もが助けに喜んで？

const button = document.querySelector("button");
let toDoList = [];
const input = document.querySelector(".add");
const search = document.querySelector(".search");
const ul = document.querySelector("ul");
const removeBtn = document.getElementsByClassName("remove");
const span = document.querySelector("h1 span");
const key = 0

const addItem = (e) => {
  e.preventDefault()
  ul.innerHTML = ""
  toDoList.push(input.value)
  toDoList.forEach((toDoElement, key) => {
    const task = document.createElement("li")
    task.dataset.key = key;
    key++
    task.className = "task";
    task.textContent = toDoElement
    task.innerHTML += ` <button>usuń</button>`
    ul.appendChild(task);
    span.textContent = toDoList.length;
    task.querySelector("button").addEventListener("click", removeItem)
  })

}

const searchList = (e, toDoList) => {
  ul.innerHTML = ""
  if (search.value === "") {
    toDoList.forEach((toDoElement, key) => {
      const task = document.createElement("li")
      task.dataset.key = key;
      key++
      task.className = "task";
      task.textContent = toDoElement
      task.innerHTML += ` <button>usuń</button>`
      ul.appendChild(task);
      span.textContent = toDoList.length;
      task.querySelector("button").addEventListener("click", removeItem)
    })
  } else {
    const searchText = e.target.value.toLowerCase();
    console.log(searchText);
    console.log(toDoList);
    let result = toDoList.filter(li => li.textContent.toLowerCase().includes(searchText))
    console.log(result)
  }
}

const removeItem = (e) => {
  e.target.parentNode.remove();
  const index = e.target.parentNode.dataset.key;
  toDoList.splice(index, 1)
  span.textContent = toDoList.length;
}


button.addEventListener("click", addItem);
search.addEventListener("input", searchList)

<form>
  <input type="text" class="add">
  <button>Dodaj zadanie</button>
</form>
<form>
  <input type="text" class="search">
</form>
<h1>Liczba zadań: <span></span></h1>
<ul></ul>

ヘラクレス株式会社：

あなたは、保存されたtoDoListので、名前の関数の変数定義、世界的にtoDoList（それがあったので、何もなかったに渡されたものは何でもしてそのスコープ内で上書きしますundefined）。他の人が言ったように、ちょうどからパラメータを削除することはsearchList十分でした。

私はそれがより読みやすいように、同様のコードを整理しようとした、と私は不足しているセミコロンを追加しました。彼らはオプションではありません！;-)

const button = document.querySelector("button");
const input = document.querySelector(".add");
const search = document.querySelector(".search");
const ul = document.querySelector("ul");
const removeBtn = document.getElementsByClassName("remove");
const span = document.querySelector("h1 span");

var toDoList = [];
const key = 0;

const addItem = (e) => {
  e.preventDefault();
  ul.innerHTML = "";
  toDoList.push(input.value);
  toDoList.forEach((toDoElement, key) => {
    const task = document.createElement("li");
    task.dataset.key = key++;
    task.className = "task";
    task.innerHTML = toDoElement + "<button>Remove</button>";
    task.querySelector("button").addEventListener("click", removeItem);

    ul.appendChild(task);
    span.textContent = toDoList.length;
  });
}

const removeItem = (e) => {
  e.target.parentNode.remove();
  const index = e.target.parentNode.dataset.key;
  toDoList.splice(index, 1);
  span.textContent = toDoList.length;
}

const searchList = (e) => {
  ul.innerHTML = "";
  if (!search.value)
    toDoList.forEach((toDoElement, key) => {
      const task = document.createElement("li");
      task.dataset.key = key++;
      task.className = "task";
      task.innerHTML = toDoElement + "<button>Remove</button>";
      task.querySelector("button").addEventListener("click", removeItem);

      ul.appendChild(task);
      span.innerHTML = toDoList.length;
    });

  else {
    const searchText = e.target.value.toLowerCase();
    let result = toDoList.filter(
      li => li.toLowerCase().includes(searchText)
    );

    console.clear();
    console.log("Search:", searchText);
    console.log("ToDoList:", toDoList);
    console.log("Results:", result);
  }
}

button.addEventListener("click", addItem);
search.addEventListener("input", searchList);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>toDoList</title>
</head>

<body>
  <form>
    <input type="text" class="add">
    <button>Add task</button>
  </form>
  <br>
  <form>
    <label for="search_input">Search</label><br>
    <input id="search_input" type="text" class="search">
  </form>
  <h1>Num tasks: <span>0</span></h1>
  <ul></ul>
  <script src="main.js"></script>
</body>

</html>