无法读取 null 的属性（读取“firstChild”）

Question

我完全使用 javascript 工作，webpack 在运行构建后生成 HTML 文件。

这是我的代码的不同模块：

index.js

import { renderLayout } from './layout.js';
import { generateDialog } from './dialog.js';
import './style.css';
    
renderLayout();

const btnAddItem = document.querySelector('button#addItem');

btnAddItem.addEventListener('click', () => { generateDialog(); });

布局.js

// some code

const div2 = document.createElement('div');
const titleDisplays = document.createElement('div');
div2.appendChild(titleDisplays);

// some more code

function renderLayout() {
    document.body.appendChild(div2);
}

export {renderLayout};

dialog.js

import * as myFn from './list.js'

const dialog = document.createElement('dialog');
const submit = document.createElement('button');
submit.type = 'submit';
submit.value = 'default';
submit.id = 'confirmBtn';
submit.innerHTML = 'Confirm';

// some more code

function generateDialog() {
    document.body.appendChild(dialog);
    dialog.showModal();
}

submit.addEventListener('click', event => {
    dialog.close();
    newList(input.value); // input.value is the value inside the variable 'value' that points to a text input field
    updateUI();
})

export { generateDialog };

列表.js

export const titleDisplays = document.querySelector('div.sidebar div');
export let lists = []
export let listItems = []

export function newList(list) {
    localStorage.setItem(list, [])
    localStorage.setItem(Math.round((localStorage.length + 1) / 2), list);
}

export function emptyUI() {
    while (titleDisplays.firstChild != undefined) {
        titleDisplays.removeChild(titleDisplays.firstChild);
    }
}

除了emptyUI()函数之外，代码整体工作完全正常，该函数返回“无法读取null的属性”错误，表明titleDisplays变量为null，或者没有被DOM或其他东西检测到，我可以'不明白为什么以及如何解决它。

Answer 1

可能是因为在

emptyUI

的 while 循环中，您不是检查假值或空值，而是专门检查

undefined

值。并且，当

titleDisplays

被清空后，

titleDisplays.firstChild

将是

null

，而不是

undefined

。这就是为什么，即使在

titleDisplays

为空之后，您的 while 循环也会运行。

在

emptyUI

功能中，更改

while (titleDisplays.firstChild != undefined) { ... }

到

while (titleDisplays.firstChild) { ... }

console.log(document.querySelector('.empty-list').firstChild);

<ul class="empty-list"></ul>