Cannot read properties of null(reading 'value')报错原因排查及代码建议

这个错误Cannot read properties of null (reading 'value')的直接原因是：在lerDados方法中，你尝试获取document.getElementById('nomeItem').value，但HTML里的商品输入框未设置id="nomeItem"，导致getElementById返回null，读取null的value属性触发了报错。

• 元素ID不匹配：JS代码引用了nomeItem这个ID，但HTML对应的<input>标签缺失该属性，这是核心bug。
• 表格初始数据逻辑冲突：<tbody>里的固定数字行（1-7）和后续要动态添加的商品数据逻辑不符，会导致展示混乱。
• 表单验证不完整：仅验证商品名称为空的情况，未覆盖星期选择的异常场景（虽当前select有默认值，但后续逻辑调整后可能出问题）。
• 内联事件绑定维护性差：按钮使用onclick="item.inserir()"内联绑定，不利于代码拆分和事件解绑。

1. 修复ID匹配问题
   给HTML的商品输入框补充ID，同时优化占位提示：

<input type="text" id="nomeItem" placeholder="Digite o nome do produto">

2. 清理无效初始表格数据
   删除<tbody>里的固定行，为动态渲染预留空间：

<tbody id="tbody"></tbody>

3. 完善表单验证
   优化提示信息格式，可选增加星期选择验证：

validaCampos(item) {
    let msg = [];

    if(item.nomeItem.trim() === '') {
        msg.push('Informe o nome do produto');
    }
    // 可选：若需强制用户主动选择星期，取消默认选中后启用此验证
    // if(!item.diasSemana) {
    //     msg.push('Escolha um dia da semana');
    // }

    if(msg.length > 0) {
        alert(msg.join('\n'));
        return false;
    }
    
    return true;
}

4. 改用事件监听绑定
   替换内联onclick，提升代码可维护性：

// 在类实例化后添加
document.querySelector('.botao-centro button').addEventListener('click', () => {
    item.inserir();
});
// 同时移除HTML按钮的onclick属性

5. 补充数据渲染逻辑
   目前代码仅将数据存入数组，需添加渲染到表格的方法：

listar() {
    let tbody = document.getElementById('tbody');
    tbody.innerHTML = ''; // 清空旧数据

    const diasMap = ['dia1', 'dia2', 'dia3', 'dia4', 'dia5', 'dia6', 'dia7'];
    this.arrayItems.forEach(item => {
        let tr = tbody.insertRow();
        // 生成星期列
        diasMap.forEach(dia => {
            let td = tr.insertCell();
            if(item.diasSemana === dia) td.textContent = item.nomeItem;
        });
        // 生成操作列
        let tdAcoes = tr.insertCell();
        tdAcoes.innerHTML = '<img src="edit-icon.png" alt="Editar"><img src="remove-icon.png" alt="Remover">';
    });
}

// 在adicionar方法末尾调用渲染
adicionar(item) {
    this.arrayItems.push(item);
    this.id++;
    this.listar();
}

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