Когда я добавляю задачу в свой массив, она не обновляется в html, что мне нужно, чтобы разобраться в этом? Кроме того, как я могу подключить кнопку «Удалить», которая создается в цикле, к функции?

const form = document.querySelector('form')
const input = document.querySelector('input')
const btnAdd = document.querySelector('button')
let ul = document.querySelector('ul')

let todos = ["one", "two", "three"];


pushTodos = (e) => {

e.preventDefault();
todos.push(input.value);
input.value = '';
console.log(todos);
}


for(let i of todos) {
createList = document.createElement("li");
createList.innerHTML+=i + '<button>Delete</delete>';
    console.log(todos);
ul.appendChild(createList);
}

form.addEventListener('submit', pushTodos)
0
debooger3 13 Фев 2021 в 11:59

3 ответа

Лучший ответ

Проблема в том, что вы обновляете DOM только один раз при загрузке документа. После обновления списка вы ничего не делаете. Чтобы исправить это, создайте функцию синхронизации для синхронизации вашей памяти с DOM и вызывайте ее каждый раз, когда вы обновляете список:

let todos = ["one", "two", "three"];

const syncTodosWithDOM = () => {
  ul.innerHTML = "";
  for (let i of todos) {
    createList = document.createElement("li");
    createList.innerHTML+=i + '<button>Delete</delete>';
    console.log(todos);
    ul.appendChild(createList);
  }
};

pushTodos = (e) => {
  e.preventDefault();
  todos.push(input.value);
  input.value = '';
  console.log(todos);
  syncTodosWithDOM();
}
syncTodosWithDOM();
form.addEventListener('submit', pushTodos)
2
dmitryguzeev 13 Фев 2021 в 09:05

Итерировать todos внутри функции pushTodos. Создайте отдельную функцию createDomElem, которая создаст элемент dom и вызовет эту функцию снова, когда элемент будет помещен в массив.

pushTodos = (e) => {

  e.preventDefault();
  todos.push(input.value);
  input.value = '';
  console.log(todos);
  createDomElem()
}

createDomElem = () => {
  for (let i of todos) {
    createList = document.createElement("li");
    createList.innerHTML += i + '<button>Delete</delete>';
    console.log(todos);
    ul.innerHTML = ''; // remove previous list
    ul.appendChild(createList);
  }

}
createDomElem() // will create initial list of todos
0
brk 13 Фев 2021 в 09:05

В pushTodos вам также необходимо обновить HTML.

pushTodos = (e) => {
  e.preventDefault();
  todos.push(input.value);
  input.value = '';

  createList = document.createElement("li");
  createList.innerHTML+=input.value + '<button>Delete</delete>';
  ul.appendChild(createList);
}

0
علی سالمی 13 Фев 2021 в 09:06
66183412