健身追踪器开发问题：JS内容无法加载至HTML页面求助

以下是针对你遇到的健身追踪器页面内容无法显示问题的排查方向：

• 修正script标签属性错误：HTML中引入JS文件的script标签误用了href属性，正确属性应为src，这是JS文件无法加载的核心问题之一。
• 移除冗余的JS引入：main.js已经通过import导入了workoutTracker.js，HTML里无需再单独引入workoutTracker.js，保留main.js的引入即可。
• 补全未定义的方法：workoutTracker类的构造函数中调用了loadEntries()和updateView()，但这两个方法目前未定义，会导致JS报错中断执行，可先注释这两行调用，验证基础HTML渲染是否正常。
• 检查文件路径：确认main.js、workoutTracker.js和index.html的相对路径正确，确保文件在同一目录或路径引用无误。
• 查看浏览器控制台报错：按下F12打开开发者工具控制台，查看是否有模块加载失败、方法未定义等错误信息，快速定位问题根源。

修正后的关键代码示例 #

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>Fitness Tracker</title>
    <link rel="stylesheet" href="style.css" />
    <!-- 修正src属性，移除冗余的workoutTracker.js引入 -->
    <script src="main.js" type="module"></script>
  </head>
  <body>
    <div id="app">
      <!-- 原注释的HTML将由JS动态生成 -->
    </div>
  </body>
</html>

main.js文件

import workoutTracker from "./workoutTracker.js";

const app = document.getElementById("app");

new workoutTracker(app);

workoutTracker.js文件（补充方法占位）

export default class workoutTracker {
  constructor(root) {
    this.root = root;
    this.root.insertAdjacentHTML("afterbegin", workoutTracker.html());
    // 先注释或补全方法避免报错
    // this.loadEntries();
    // this.updateView();
  }
  static html() {
    return `
    <table class="tracker">
      <thead>
        <tr>
          <th>Date</th>
          <th>Workout</th>
          <th>Duration</th>
          <th></th>
        </tr>
      </thead>
      <tbody class="tracker__entries">
      </tbody>
      <tbody>
        <tr class="tracker__row tracker__row--add">
          <td colspan="4">
            <button class="tracker__add">Add Entry &plus;</button>
          </td>
        </tr>
      </tbody>
    </table>
    `;
  }

  // 补全方法占位，后续可实现具体逻辑
  loadEntries() {
    // 加载记录的逻辑
  }

  updateView() {
    // 更新视图的逻辑
  }
}

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