如何让函数在指定页面加载完成后执行？（答题系统开发）

问题分析 #

你当前的核心问题是：在跳转前的页面调用hideRightAnswerFinal()试图绑定新页面的onload事件，但跳转后原页面的脚本会被销毁，根本无法影响新页面；同时脚本放在<head>里执行时，DOM元素还未加载，容易出现找不到元素的错误。

解决方案 #

修改页面脚本加载位置 #

将所有页面的<script>标签移到<body>标签末尾，确保DOM元素完全加载后再执行脚本，避免找不到元素的问题。

调整JavaScript逻辑 #

让需要显示“Well Done”的页面，在自身加载完成后自动启动定时隐藏逻辑，无需从之前的页面触发。

修改后的完整代码 #

第一题页面（index.html）

<!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>test</title>
</head>
<body id="body1">
    <h1> 1 </h1>
    <p>  QUESTION </p>
    <button onclick="location.href = '1.html';" id="a"> PLACE HOLDER </button>
    <button onclick="wrongAnswer()"> PLACE HOLDER </button>
    <p id="output">  </p>
    <!-- 脚本移至body末尾 -->
    <script src="scripts.js"></script>
</body>
</html>

第二题页面（1.html）

<!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>test</title>
</head>
<body id="body2">
    <h3 id="welldone"> Well Done </h3>
    <h1> 2 </h1>
    <p>  QUESTION </p>
    <button onclick="location.href = '2.html';" id="b"> PLACE HOLDER </button>
    <button onclick="wrongAnswer()"> PLACE HOLDER </button>
    <button onclick="location.href = 'index.html';goBackHide()"> Go back </button>
    <p id="output"> </p>
    <!-- 脚本移至body末尾 -->
    <script src="scripts.js"></script>
</body>
</html>

JavaScript代码（scripts.js）

const wrong = "Wrong, try again!";

// 答错提示逻辑
function wrongAnswer() {
    const outputEl = document.getElementById('output');
    if (outputEl) {
        outputEl.innerHTML = wrong;
    }
}

// 隐藏Well Done提示
function hideWellDone() {
    const welldoneEl = document.getElementById('welldone');
    if (welldoneEl) {
        welldoneEl.innerHTML = "";
    }
}

// 页面加载完成后自动执行
document.addEventListener('DOMContentLoaded', function() {
    // 检查当前页面是否存在Well Done提示元素
    const welldoneEl = document.getElementById('welldone');
    if (welldoneEl) {
        // 500毫秒后隐藏提示，可根据需求修改时长
        setTimeout(hideWellDone, 500);
    }
});

// 返回时隐藏提示
function goBackHide() {
    const welldoneEl = document.getElementById('welldone');
    if (welldoneEl) {
        welldoneEl.innerHTML = "";
    }
}

关键修改说明 #

1. 脚本位置调整：将脚本移到body末尾，确保DOM元素加载完成后再执行脚本，避免getElementById返回null的错误。
2. 页面自处理逻辑：使用DOMContentLoaded事件监听页面加载完成，自动检测当前页面是否需要显示提示并启动定时隐藏，替代原来跨页面绑定事件的错误逻辑。
3. 容错处理：所有DOM操作前先检查元素是否存在，避免控制台报错。

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