Почему количество последних элементов не фильтруется при удалении?

#javascript

Вопрос:

У меня есть список дел с CRUD. Я только что внедрил счетчик задач, чтобы показать количество задач, которые осталось выполнить. Количество увеличивается/уменьшается с проверкой/снятием отметок элементов и уменьшается при удалении элементов. За исключением одной проблемы. По какой-то причине в последнем удаленном элементе счетчик остается на 1 вместо 0. Полный кодовый набор

Вот что я попробовал:

 function renderTaskCount() {
    const incompleteTaskCount = todos.filter((item) => !item.completed).length;
    const taskString = incompleteTaskCount === 1 ? 'task' : 'tasks';
    listCountElement.innerText = `${incompleteTaskCount} ${taskString} remaining`;
    return incompleteTaskCount;
}

const renderTodos = () => {
    ul.innerHTML = '';
    todos.forEach((item) => {
        let li = document.createElement('LI');
        li.setAttribute('class', 'item');
        li.setAttribute('data-key', item.id);
        const itemText = createTodoText(item);
        const cb = buildCheckbox(item);
        const db = buildDeleteButton(item);
        li.append(cb);
        li.append(db);
        li.append(itemText);
        ul.append(li);
        //update height of textarea
        updateHeight(itemText);
        renderTaskCount();
    });
};

1. Ваш код (прочитанный с минимальной предоставленной информацией) не подразумевает, что это вообще должно произойти, так что, может быть, вы просто не удаляете последний элемент?

2. Вы не должны использовать if ( input !== '' ) { вместо этого использовать if ( input.trim() !== '' ) {

3. @decpk Я внесу это изменение. Приятно это знать. Спасибо

Ответ №1:

У тебя есть

 const renderTodos = () => {
    ul.innerHTML = '';
    todos.forEach((item) => {
        let li = document.createElement('LI');
        li.setAttribute('class', 'item');
        li.setAttribute('data-key', item.id);
        const itemText = createTodoText(item);
        const cb = buildCheckbox(item);
        const db = buildDeleteButton(item);
        li.append(cb);
        li.append(db);
        li.append(itemText);
        ul.append(li);
        //update height of textarea
        updateHeight(itemText);
        renderTaskCount();
    });
};

где renderTaskCount обновляется количество — что делается в конце каждой итерации. Поэтому, если todos массив пуст, счетчик никогда не будет обновлен. Тебе нужно

 const renderTodos = () => {
    ul.innerHTML = '';
    todos.forEach((item) => {
        // ...
    });
    renderTaskCount();
};

так что независимо renderTaskCount от того, выполняется ли todos заполнение массива или нет.