Количество элементов остается неизменным после добавления с Javascript

Question

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

Под списком заметок ul отображается сообщение с указанием количества заметок. ($('li').length).

Однако, если вы добавите новую заметку в список, количество заметок останется прежним. Он не обновляется, когда вы добавляете новую заметку или удаляете все заметки, удаляя всю ложь в списке.

Я попытался создать функцию, которая отображает количество заметок, и добавил ее в качестве функции обратного вызова после функций addNote и clearNote, но она по-прежнему отображает только количество li в исходном HTML. (3Li-х).

Как я могу обновить это, чтобы оно добавлялось при добавлении li?

//    N° of notes length
let numberOfNotes = $('li').length;
//   End  N° of notes length

NotesNumberMessage()

// Display N° of notes length
function NotesNumberMessage() {
    $('#NumberPostMessage').text(`You have ${numberOfNotes} active notes`);
};
// End display N° of notes length

// Add a new note function
function addNote() {
    $('#addBtn').on('click', function () {
        let noteText = ($('#input').val());
        let newTodo = $('<li class="list-group-item" id="note"></li>').text(noteText);
        $('#noteList').append(newTodo);
    });
    NotesNumberMessage()
    alert(numberOfNotes);
};
// End add a new note function

Answer 1

Вы объявили переменную numberOfNotes один раз и никогда не обновляли ее.

Что вам нужно сделать, это обновить переменную внутри функции NotesNumberMessage. И удалите его из глобальной декларации, если он вам больше не нужен.

//    N° of notes length
let numberOfNotes = $('li').length; // can be removed;
//   End  N° of notes length

NotesNumberMessage()

// Display N° of notes length
function NotesNumberMessage() {
    // N° of notes length
    let numberOfNotes = $('li').length;
    $('#NumberPostMessage').text(`You have ${numberOfNotes} active notes`);
};
// End display N° of notes length

Пока вы проверяете количество списков,

alert(numberOfNotes);

обновить переменную, как показано ниже, и затем выдать предупреждение:

numberOfNotes = $('li').length;
alert(numberOfNotes);

Answer 2

Если вы сохраняете ссылку на ul/ol, к которому вы добавляете li, вы можете получать .children().length каждый раз для обновления счета.

Вы также должны выполнить NotesNumberMessage() вызов внутри обработчика щелчка, иначе это никогда не произойдет после первого вызова addNode(), который следует вызывать только один раз , поскольку он создает привязку события.

let $noteList = $('#noteList');

NotesNumberMessage();

function NotesNumberMessage() {
    $('#NumberPostMessage').text(`You have ${$noteList.children().length} active notes`);
};

function addNote() {
    $('#addBtn').on('click', function () {
        let noteText = $('#input').val();
        let newTodo = $('<li class="list-group-item" class="note"></li>').text(noteText);
        $noteList.append(newTodo);

        NotesNumberMessage();
        alert($noteList.children().length);
    });
};