解决JavaScript中Cannot read properties of null (reading 'appendChild')报错

问题原因 #

尽管脚本位于body末尾，但在某些极端场景下（如浏览器DOM解析延迟、变量意外被覆盖），全局变量tapete_inicial可能在初始化或后续操作中变为null，导致调用appendChild时触发报错。而卡牌最终能成功添加，大概率是因为函数被重新调用时变量已恢复正常，或后续DOM解析完成后元素被正确获取。

解决方案 #

1. 确保DOM完全加载后再初始化元素

将全局变量的赋值和游戏启动逻辑放到DOMContentLoaded事件回调中，保证DOM结构完全解析完成后再执行操作：

/***** INICIO DECLARACIÓN DE VARIABLES GLOBALES *****/
// Array de palos y números
let palos = ["corazones", "picas", "rombos", "treboles"];
let numeros = ["as", 2, 3, 4, 5, 6, 7, 8, 9, 10, "jota", "reina", "rey"];
let paso = 3;

// Tapetes - 先声明，后续在DOM加载完成后赋值
let tapete_inicial;
// Mazos
let mazo_inicial = [];

// 等待DOM完全加载后再执行初始化
document.addEventListener('DOMContentLoaded', function() {
    tapete_inicial = document.getElementById("inicial");
    document.getElementById("reset").onclick = comenzar_juego;
    comenzar_juego();
});

// Desarrollo del comienzo de juego
function comenzar_juego() {
    // 函数原有逻辑保持不变...
}

function cargar_tapete_inicial(mazo) {
    // 函数原有逻辑保持不变...
}

2. 在使用元素前添加存在性检查

在cargar_tapete_inicial函数开头增加检查逻辑，确保目标元素存在后再执行添加操作：

function cargar_tapete_inicial(mazo) {
    // 重新获取元素，避免全局变量失效
    tapete_inicial = tapete_inicial || document.getElementById("inicial");
    
    if (!tapete_inicial) {
        console.error("无法找到id为inicial的元素，终止卡牌添加");
        return;
    }

    for (let i = 0; i < mazo.length; i++) {
        mazo[i].style.width = "50px";
        mazo[i].style.position = "absolute";
        mazo[i].style.top = paso+'px';
        mazo[i].style.left = paso+'px';
        paso = paso + 3;

        tapete_inicial.appendChild(mazo[i]);
    }
    
    paso = 3;
}

通过以上两步修改，可彻底避免Cannot read properties of null (reading 'appendChild')的报错，同时保证卡牌正常添加到目标容器中。

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