Переменная в анонимной функции в EventListener остается неопределенной, несмотря на то, что она была ранее объявлена, а затем четко определена - PullRequest
Новая
       72

Переменная в анонимной функции в EventListener остается неопределенной, несмотря на то, что она была ранее объявлена, а затем четко определена

0 голосов
/ 13 июля 2020

Итак, я делаю основной список задач c, используя только HTML и JS, и по какой-то причине, когда я go добавляю элемент в список, переменная, которую я использование для выбора пустого элемента «li» возвращается как «undefined» после того, как я выполняю функцию в EventListener для кнопки «очистить». Может ли кто-нибудь помочь здесь, пожалуйста. HTML и JS прилагаются ниже: 

let todos = [];
let add = document.querySelector("#add");
let remove = document.querySelector("#remove")
let clear = document.querySelector("#clear")
let todolist = document.querySelector("#todolist")
let addTodo;
let clearedTodo;
let newTodo;

add.addEventListener("click", function() {
  addTodo = prompt("Enter the item you would like to add.")
  todos.push(addTodo);
  todolist.innerHTML += "<li></li>"
  newTodo = document.getElementsByTagName("li")[todos.length - 1]
  newTodo.textContent = addTodo;

})

remove.addEventListener("click", function() {
  let removeTodo = prompt("Enter the index number of the item you would like to remove.") - 1;
  let removedTodo = document.getElementsByTagName("li")[removeTodo]
  removedTodo.remove();
  todos.splice(removeTodo, 1);
})

clear.addEventListener("click", function() {
  todos = [];
  document.querySelector("ol").remove();
  document.querySelector("div").innerHTML += '<ol id="todolist"></ol>'
  console.log("To Do list was cleared.")
})
<h1>The Ultimate To Do List</h1>
<p>Click on an item to mark as done.</p>

<button id="add">ADD</button>
<button id="remove">REMOVE</button>
<button id="clear">CLEAR</button>
<div id="clearer">
  <ol id="todolist">
  </ol>
</div>

Спасибо.

1 Ответ

0 голосов
/ 13 июля 2020

Проблема в вашей функции очистки. В основном это выглядит хорошо, за исключением одной проблемы, которая вызывает серьезную ошибку. Когда вы удаляете весь элемент "ol", ваш todolist var теряет ссылку, поскольку ему не на что указывать. Вам придется заново объявить это.

Но есть более простой способ исправить это. Удалите эти строки: 

document.querySelector("ol").remove();
document.querySelector("div").innerHTML += '<ol id="todolist"></ol>'

Используйте эту строку вместо: 

todolist.innerHTML = "";

Теперь список задач в DOM также очищен, и ваш todolist var по-прежнему указывает на то, что он должен .

...