Длина массива не будет увеличиваться после опустошения и не может добавить событие мыши в HTMLCollection

Я боюсь этого сообщества, поэтому я так долго старался изо всех сил, искал в Интернете... но я потерпел неудачу. Пожалуйста помоги.

Поэтому я хочу создать свой собственный список покупок / задач в JavaScript и HTML. Я могу добавить вещи в список без проблем, но у меня есть 2 проблемы:

  1. Если я добавил элементы в список, а затем нажмите кнопку "Очистить", чтобы стереть все в списке, это работает. Однако, когда я добавляю вещи обратно в список после его очистки, моя консоль уведомляет меня, что мой массив все еще пуст, несмотря на новые задачи, отображаемые на экране.
  2. Моя вторая проблема больше. Видите ли, все мои задачи находятся в том, что я считал массивом, но на самом деле это коллекция HTML. Итак, когда я пытаюсь установить onclick событие, это просто не будет работать. Я понятия не имею, почему, и я попытался использовать следующий вопрос: Удаление элементов HTMLCollection из DOM. Это не сработало. Я пытался с помощью item, HTMLCollection item () Метод. Не сработало Моя последняя попытка использовала for(let thing of... но до сих пор нет результатов.

h Вот мой код, не стесняйтесь комментировать, если мне нужно что-то уточнить.

let listGro = document.getElementById("list");

let aButton = document.getElementById("add");
let cButton = document.getElementById("clear");
let tasks = document.getElementsByTagName("li");


aButton.onclick = function addItem() {
    let newThing = prompt("What do you want to add?"); // asking what the person wants

    if (newThing) { // checking if the user actually added something
        let newItemList = document.createElement("li"); //create item list
        newItemList.className = "item";
        let newItemListText = document.createTextNode(newThing); // create text
        newItemList.appendChild(newItemListText); // append text
        listGro.appendChild(newItemList); // append new element
        console.log(`New task added\nNumber of tasks in the list: ${tasks.length}`);
    } else {
        alert("You can't add nothing");
    }

};

cButton.onclick = function clearList() {
    var conf = confirm("Are you sure you want to clear the list?");
    if (conf && tasks.length != 0) {
        for (let i = 0; i < tasks.length; i++) {
            tasks[i].style.display = "none";
        }
        tasks = [];
    }

}

for(let thing of tasks) {
    //tasks[i].onclick = function removeOrEditItem() {
        /*let demand = prompt("Do you want to edit or remove the item?\nPlease answer with 'edit' or 'remove'\nIf this is a mistake, just enter nothing.");
        if (demand === "edit") {
            let editItem = prompt("What is your new thing?");
            tasks[i].innerHTML = editItem;
        } else if (demand === "remove") {
            tasks[i].splice(i, 1);
        }
        console.log("clicked");
    };*/
    
    // The thing above was a previous attempt with for(let i; i< items.length... you can work with that or below.
    thing.onclick = function removeTask() {
        thing.style.display = "none";
        console.log("removed");
    }
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Website template</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
    </head>
    <body>
        <h1>Grocery lists manager</h1>
        <h2>Welcome! here you can manage your grocery list!</h2>
        <ul id = "list"><span>List:</span></ul>
        <button id = "add">Add</button>
        <button id = "clear">Clear list</button>
    </body>
    <script src = "script.js"></script>
</html>

Пожалуйста, не переводите меня в глубину Земли, я уже боюсь этого сообщества... Спасибо за вашу помощь.

Источник

1 ответ

Решение

Список задач остается пустым, когда вы его очищаете, потому что вы перезаписываете коллекцию HTML пустым массивом. Вы назначены document.getElementsByTagName("li"); в tasks, который является живой коллекцией. Переназначение [] это даст ему неживой пустой массив. Вместо того, чтобы визуально скрывать задачи с tasks[i].style.display="none и вручную сбросить tasks коллекция, вы должны удалить каждый элемент задачи из DOM и позволить вашей живой коллекции обновляться автоматически.

Удаление коллекции из DOM имеет некоторые подводные камни, но, как правило, может быть достигнуто с помощью чего-то вроде следующего:

while(tasks.length > 0) {
    tasks[0].parentNode.removeChild(tasks[0]);
}

Ваши слушатели событий не добавляются, потому что код, который добавляет их, запускается только один раз, когда загружается скрипт. И, конечно же, в случае, когда скрипт загружен, в списке нет задач. Добавьте слушателя события к человеку newItemList когда это впервые добавлено.

Убедитесь, что вы удалили задачу из DOM, а не просто скрыли ее.

 newItemList.onclick = function removeTask() {
     newItemList.parentNode.removeChild(newItemList);
     console.log("removed");
 }

Ваш полный JavaScript может выглядеть так:

let listGro = document.getElementById("list");
let aButton = document.getElementById("add");
let cButton = document.getElementById("clear");
let tasks = document.getElementsByTagName("li");

aButton.onclick = function addItem() {
    let newThing = prompt("What do you want to add?"); // asking what the person wants

    if (newThing) { // checking if the user actually added something
        let newItemList = document.createElement("li"); //create item list
        newItemList.className = "item";
        let newItemListText = document.createTextNode(newThing); // create text
        newItemList.appendChild(newItemListText); // append text
        newItemList.onclick = function removeTask() {
            newItemList.parentNode.removeChild(newItemList);
            console.log("removed");
        }
        listGro.appendChild(newItemList); // append new element
        console.log(`New task added\nNumber of tasks in the list: ${tasks.length}`);
    } else {
        alert("You can't add nothing");
    }
};

cButton.onclick = function clearList() {
    var conf = confirm("Are you sure you want to clear the list?");
    if (conf && tasks.length != 0) {
        while(tasks.length > 0) {
            tasks[0].parentNode.removeChild(tasks[0]);
        }
    }
};
Источник
Другие вопросы по тегам