Uncaught TypeError: Cannot read property 'innerText' of null 移动书架数据报错求助

你遇到的Cannot read property 'innerText' of null报错由以下两个核心问题导致：

• 选择器层级错误：传入的taskElement本身就是类为book_item的DOM节点，你在其内部再次查找.book_item的子元素，无匹配节点时querySelector返回null，调用innerText就抛出类型错误。
• 作者、年份取值逻辑错误：你两次选中了book_item下的第一个<p>标签，会导致作者和年份取值完全一致，不符合书架业务逻辑。

两个函数的选择器部分统一修改即可，以下是完整修正后代码：

function addTaskToCompleted(taskElement /* HTMLELement */ ) {
    const listCompleted = document.getElementById(COMPLETED_LIST_BOOK_ID);
    // 直接在book_item节点下查找子元素
    const JudulBuku = taskElement.querySelector("h3").innerText;
    // 按顺序选中对应p标签，也可替换为你设置的专属类名选择器，比如.book_author
    const PenulisBuku = taskElement.querySelector("p:nth-of-type(1)").innerText;
    const TahunBuku = taskElement.querySelector("p:nth-of-type(2)").innerText;

    const newBook = makeBook(JudulBuku, PenulisBuku, TahunBuku, true);

    const book = findBook(taskElement[BOOK_ITEMID]);
    book.isCompleted = true;
    newBook[BOOK_ITEMID] = book.id;

    listCompleted.append(newBook);
    taskElement.remove();

    updateDataToStorage();
}


function undoTaskFromCompleted(taskElement /* HTMLELement */ ) {
    const listUncompleted = document.getElementById(UNCOMPLETED_LIST_BOOK_ID);
    // 同上修改选择器
    const JudulBuku = taskElement.querySelector("h3").innerText;
    const PenulisBuku = taskElement.querySelector("p:nth-of-type(1)").innerText;
    const TahunBuku = taskElement.querySelector("p:nth-of-type(2)").innerText;

    const newBook = makeBook(JudulBuku, PenulisBuku, TahunBuku, false);

    const book = findBook(taskElement[BOOK_ITEMID]);
    book.isCompleted = false;
    newBook[BOOK_ITEMID] = book.id;

    listUncompleted.append(newBook);
    taskElement.remove();

    updateDataToStorage();
}

注：如果你的<p>标签已经设置了专属类名（比如book_author、book_year），更推荐直接使用类选择器替换nth-of-type，后续结构变更时兼容性更强。

内容的提问来源于stack exchange，提问作者nob