为何通过document.getElementById设置的恭喜消息无法显示？

问题根源 #

猜对钻石后设置的恭喜消息不显示，核心原因是阻塞式弹窗打断了DOM渲染：
当你设置messageBox的文本后，立刻调用了window.prompt()——这个原生弹窗会直接阻塞浏览器的渲染线程，导致页面还没来得及更新显示恭喜消息，弹窗就弹了出来。等用户处理完弹窗后，页面要么被刷新要么被关闭，恭喜消息根本没有展示的机会。

修复方案 #

方案1：延迟执行弹窗代码（快速解决）

用setTimeout给DOM更新预留时间，让恭喜消息先显示出来，再弹出确认框：

function check(guess) {
    if(diamond == guess)
    {
        document.getElementById('messageBox').textContent = 'Congratulations! You have found the diamond!';
        
        // 延迟500ms执行弹窗，确保页面先更新消息
        setTimeout(() => {
            again = window.prompt("Would you like to play another game? Enter Y or N.", "Y");
            
            if(again == "N" || again == "n")
            {
                window.alert("Thanks for playing. Goodbye.");
                window.close();
            }
            else
            {
                window.alert("The diamond has been hidden. You can now try again.");
                window.location.reload();
            }
        }, 500);
    }
    // 其余代码保持不变...
}

方案2：替换所有原生弹窗（体验更优）

如果想彻底避免阻塞问题，可以把所有alert和prompt都替换成页面内的交互元素（比如自定义模态框），完全摆脱原生弹窗的阻塞特性。不过方案1已经能快速解决当前问题。

额外优化（统一提示风格） #

你还可以把其他window.alert也改成用messageBox显示，保持页面提示风格一致：

// 错误提示部分替换
else
{
    number_of_guesses = number_of_guesses + 1;
    
    if(diamond < guess)
    {
        result = "lower"
    }
    else
    {
        result = "higher"
    }
    document.getElementById('messageBox').textContent = `Guess number ${number_of_guesses} is incorrect. Diamond is ${result}.`;
}

// 次数用完提示部分替换
if(number_of_guesses >= 3)
{
    document.getElementById('messageBox').textContent = `Sorry, you have run out of guesses! The diamond was in box ${diamond}`;
    
    setTimeout(() => {
        again = window.prompt("Would you like to play another game? Enter Y or N.", "Y");
        
        if(again == "N" || again == "n")
        {
            window.alert("Thanks for playing. Goodbye.");
            window.close();
        }
        else
        {
            window.alert("The diamond has been hidden. You can now try again.");
            window.location.reload();
        }
    }, 500);
}

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