JS报错ReferenceError: getActivityTables未定义，求排查方案

我遇到了JS报错：ReferenceError: getActivityTables is not defined at onload。明明已正确链接脚本，且getActivityTables函数名在HTML与JS文件中完全一致，却仍出现该错误。相关代码如下：

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">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Fitnessapp</title>
    <script src="scripts.js"></script>
</head>

<body onload="getActivityTables()">    
    <div class="container">
        <div class="activityDiv">
            <h1>Running Activities</h1>
            <table id="runningActivity-table" class="table">
            </table>
        </div>                
    </div>
</body>

</html>

JS（scripts.js）代码 #

function getActivityTables() {
    console.log("test");
    // Get runningActivity-table
    let xhttp = new XMLHttpRequest();
    xhttp.onload = function () {
        let response;
        let responseString = xhttp.responseText;
        response = JSON.parse(responseString);
        console.log(response);

        let table = document.getElementById("runningActivity-table");
        let row, cell;
        let header = table.createTHead();
        row = header.insertRow(0);
        cell = row.insertCell();
        cell.innerHTML = "ID";
        cell = row.insertCell();
        cell.innerHTML = "Date";
        cell = row.insertCell();
        cell.innerHTML = "Duration";
        cell = row.insertCell();
        cell.innerHTML = "Distance";
        cell = row.insertCell();
        cell.innerHTML = "Description";

        for (let i = 0; i < response.length; i++) {
            row = table.insertRow();
            cell = row.insertCell();
            cell.textContent = response[i].id;
            cell = row.insertCell();
            cell.textContent = response[i].dateOfCreation;
            cell = row.insertCell();
            cell.textContent = response[i].durationInMinutes;
            cell = row.insertCell();
            cell.textContent = response[i].distanceInKm;
            cell = row.insertCell();
            cell.textContent = response[i].description;
        }

    }
    xhttp.open("GET", "/getRunningActivities");
    xhttp.send();
}

我找不到问题所在，另一页面使用完全相同的代码却能正常运行，请问我哪里出错了？

以下是排查和解决方向：

• 确认脚本是否成功加载：打开浏览器开发者工具（F12）→ 切换到「网络」面板，刷新页面，找到scripts.js请求。如果状态码不是200，说明路径错误或者文件不存在。检查HTML中src的路径：如果HTML和JS文件不在同一目录，要写对相对路径（比如./scripts/scripts.js）或者绝对路径（比如/scripts.js）。

• 排除浏览器缓存干扰：浏览器可能缓存了旧的JS文件，导致新函数没被加载。按Ctrl+F5强制刷新页面，或者给脚本路径加版本参数：<script src="scripts.js?v=1"></script>，强制浏览器重新请求文件。

• 检查脚本是否有语法错误：如果JS文件里有语法错误，整个脚本会加载失败，函数自然无法定义。打开「控制台」面板，看有没有其他报错信息，比如JSON解析错误、变量未定义等，这些都会中断脚本执行。

• 调整脚本加载时机：把脚本移到<body>末尾，改用DOMContentLoaded事件绑定函数，避免时机问题：

  <body>    
      <div class="container">
          <div class="activityDiv">
              <h1>Running Activities</h1>
              <table id="runningActivity-table" class="table">
              </table>
          </div>                
      </div>
      <script src="scripts.js"></script>
      <script>
          document.addEventListener('DOMContentLoaded', () => {
              getActivityTables();
          });
      </script>
  </body>
  

• 检查当前页面的路由环境：既然另一页面相同代码能运行，可能是当前页面的路由层级导致脚本路径错误。比如当前页面在/activities/list路径下，相对路径scripts.js会指向/activities/list/scripts.js，而实际脚本在根目录的话，需要改成绝对路径/scripts.js。

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