Question

未捕获的类型错误：无法读取笔记网站中 HTMLButtonElement 的 null 属性“push”

2021-05-04

1600

javascript arrays dom local-storage

我在代码中哪里犯了错误，因为它返回了一个错误：

Uncaught TypeError: Cannot read property 'push' of null at HTMLButtonElement. (app.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);

})

Answer 1

这是因为您的 localStorage 上已经有内容。这里 else 语句正在执行，并且在 else 语句中创建了数组，所以您收到此错误。

首先清除 localStorage

localStorage.clear();

现在可以正常工作了。

Answer 2

JSON.parse(notes) 没有返回数组，因此它没有推送方法。它可能是一个对象，或者 notes 本身可能为空。notesObj 在哪里声明？确保它在范围内。

Answer 3

首先通过以下方式清除 localStorage：

localStorage.clear();

同时在此行中将 (notes) 更改为 (notesObj)：

localStorage.setItem("notes", JSON.stringify(notesObj));

这将正常工作！！