Неперехваченная ошибка типа: Не удается прочитать свойство "push" null в элементе HTMLButtonElement на веб-сайте заметок

#javascript #arrays #dom #local-storage

Вопрос:

Где я совершаю ошибку в коде, так как он возвращает ошибку:

Неперехваченная ошибка типа: Не удается прочитать свойство ‘push’ значения null в элементе HTMLButtonElement. (приложение js:15)

 console.log("Welcome to Notes Taking Website");

// If user adds a note, add it to the local Storage

let addBtn = document.getElementById('addBtn');
addBtn.addEventListener("click", function(e) {
    let addTxt = document.getElementById("addTxt");
    let notes = localStorage.getItem("notes");
    if (notes == null) {
        notesObj = [];
    } else {
        notesObj = JSON.parse(notes);
    }
    notesObj.push(addTxt.value);
    localStorage.setItem("notes", JSON.stringify(notes));
    addTxt.value = "";
    console.log(notesObj);

})

1. Что это за элемент addTxt ?

2. <div class="form-group"> <textarea class="form-control" id="addTxt" rows="3"></textarea> </div>

3. В чем заключается ошибка?

4. Неперехваченная ошибка типа: Не удается прочитать свойство «push» null в элементе HTMLButtonElement.<anonymous> (app.js:15) это 15-я строка: notesObj.push(addTxt.значение);

5. вы сохраняете notes данные в локальном хранилище, но добавляете в него новые значения notesObj . Это не имеет смысла таким образом, может быть, вам следует notesObj вместо этого сэкономить

Ответ №1:

JSON.разбор(примечания) Не возвращает массив, поэтому у него нет метода push. Это может быть объект, или сами заметки могут быть пустыми. Где объявлен notesObj? убедитесь, что он в поле зрения.

Ответ №2:

Это потому, что у вас уже есть что-то в вашем локальном хранилище. здесь выполняется оператор else, а в операторе else создается массив, поэтому вы получаете эту ошибку.

сначала очистите локальное хранилище

  localStorage.clear();

теперь это будет работать нормально.