使用textContent操作DOM元素时触发TypeError，求排查21点游戏代码问题

嘿，我帮你梳理了这段21点游戏代码里可能触发TypeError的问题，咱们一个个拆解来看：

最可能触发TypeError的核心原因：DOM元素获取失败 #

你代码里用getElementById和querySelector获取DOM元素时，如果出现以下情况，变量会变成null，这时候调用.textContent就会抛出TypeError: Cannot set properties of null：

• 页面里根本没有对应id的元素，或者id拼写错误：比如把sum-el写成sum_el、messageEl写成message-el，毕竟getElementById是严格区分大小写的，你得对照HTML里的元素id仔细核对。
• JS代码执行时机不对：如果你的JS写在HTML的<head>标签里，浏览器会先跑JS，这时候页面DOM还没渲染完，自然拿不到元素。解决办法要么把JS移到<body>标签末尾，要么用DOMContentLoaded事件包裹代码，确保DOM加载完成后再执行。

代码里的拼写错误（间接影响逻辑） #

你写了hasBlackJack = ture;，这里的ture是拼写错误，正确的布尔值是true。这个错误不会直接触发TypeError，但会导致hasBlackJack变量赋值异常，打乱后续游戏逻辑，必须修正。

额外优化点 #

你在全局作用域里直接给messageEl.textContent赋值了一次，这时候如果DOM还没加载好，这行代码会先触发TypeError。建议把这行移到startGame函数里，或者放到DOM加载完成的回调里。

修正后的参考代码 #

// 确保DOM加载完成后再执行代码
document.addEventListener('DOMContentLoaded', function() {
    let firstCard = 10;
    let secondCard = 4;
    let sum = firstCard + secondCard;
    let hasBlackJack = false;
    let isAlive = true;
    let message = "";
    let messageEl = document.getElementById("message-el");
    let sumEl = document.querySelector("#sum-el");
    let cardsEl = document.getElementById("cards-el");

    function startGame() {
        cardsEl.textContent = "Cards : " + firstCard + " " + secondCard;
        sumEl.textContent = "Sum :" + sum;

        if (sum <= 20) {
            message = "Do you want to draw a new card?";
        } else if (sum === 21) {
            message = "You have got blackjack!";
            hasBlackJack = true; // 修正拼写错误
        } else {
            message = "You are out of the game!";
            isAlive = false;
        }

        messageEl.textContent = message;
    }

    // 可以手动调用startGame，或者绑定到页面按钮的点击事件
    // startGame();
});

备注：内容来源于stack exchange，提问作者Abhishek