如何让指定DOM元素延迟自动隐藏？setTimeout方案失效问题求助

核心问题 #

你的代码无法实现预期效果的原因有两个：

1. 页面跳转终止当前代码执行：调用location.href = "1.html"后，浏览器会立即加载新页面，当前页面的所有JavaScript代码（包括后续的setTimeout）都会被终止，根本不会执行。
2. 跨页面DOM操作无效：即使setTimeout能执行，当前页面的document.getElementById('thanks1')只能操作当前页面的元素，无法访问新跳转页面（1.html）里的DOM元素，两者属于完全独立的文档环境。

正确解决方案 #

要实现目标页面加载后自动隐藏thanks1元素，必须在**目标页面（如1.html）**中添加对应的JavaScript代码，而不是在原页面的rightAnswer函数里操作。

步骤1：修正原页面的rightAnswer函数

移除原函数中无效的setTimeout代码，只保留页面跳转逻辑：

const wrong = "Wrong, try again!";
function wrongAnswer() {
    document.getElementById('output').innerHTML = wrong
} 
function rightAnswer() {
    if (document.getElementById('a')) {
        location.href = "1.html";
    }
    if (document.getElementById('b')) {
        location.href = "2.html";      
    }
    if (document.getElementById('c')) {
        location.href = "3.html";      
    }
}
function goBack() {
    if (document.getElementById('b')) {
        location.href = "index.html";      
    }
    if (document.getElementById('c')) {
        location.href = "1.html";      
    }
    if (document.getElementById('d')) {
        location.href = "2.html";      
    }
}

步骤2：在目标页面（如1.html）中添加自动隐藏逻辑

在1.html的<head>或<body>末尾添加脚本，监听页面加载完成事件，然后设置定时器隐藏thanks1元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page 1</title>
    <script>
        // 页面加载完成后执行
        window.addEventListener('load', function() {
            const thanksElement = document.getElementById('thanks1');
            if (thanksElement) {
                // 3秒后隐藏元素
                setTimeout(() => {
                    thanksElement.style.display = 'none';
                }, 3000);
            }
        });
    </script>
</head>
<body>
    <h1>1</h1>
    <!-- 页面其他内容 -->
    <p id="thanks1">Well Done</p>
    <button onclick="goBack()">Go Back</button>
</body>
</html>

补充说明 #

如果需要区分用户是否是通过答对题目跳转过来的（避免直接访问页面时也隐藏thanks1），可以通过URL参数传递状态：

1. 原页面跳转时添加参数：

location.href = "1.html?correct=true";

2. 目标页面中判断参数再执行隐藏逻辑：

window.addEventListener('load', function() {
    const urlParams = new URLSearchParams(window.location.search);
    const isCorrect = urlParams.get('correct') === 'true';
    const thanksElement = document.getElementById('thanks1');
    
    if (isCorrect && thanksElement) {
        setTimeout(() => {
            thanksElement.style.display = 'none';
        }, 3000);
    }
});

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