Unable to Load Content from JS to HTML-CodePudding

I am trying to build a workout tracker. I am using two JS files. The main.js is supposed to load content from the second (workoutTracker.js) into to the index.html. However, for some reason the content in not being loaded onto the page. Any suggestions will be appreciated. Please let me know if you need further clarification.

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" />
    <script href="main.js" type="module"></script>
    <script href="workoutTracker.js" type="module"></script>
  </head>
  <body>
    <div id="app">
      <!--
          <table >
            <thead>
              <tr>
                <th>Date</th>
                <th>Workout</th>
                <th>Duration</th>
                <th></th>
              </tr>
            </thead>
            <tbody >
              <tr >
                <td><input type="date"  /></td>
                <td>
                  <select type="text" >
                    <option value="walking">Walking</option>
                    <option value="biking">Biking</option>
                    <option value="fitness">Fitness</option>
                    <option value="running">Running</option>
                    <option value="meditation">Meditation</option>
                  </select>
                </td>
                <td>
                  <input type="number"  />
                  <span >minutes</span>
                </td>
                <td>
                  <button type="button" >&times;</button>
                </td>
              </tr>
            </tbody>
            <tbody>
              <tr >
                <td colspan="4">
                  <button >Add Entry &plus;</button>
                </td>
              </tr>
            </tbody>
          </table>
        -->
    </div>
  </body>
</html>

JS (main.js):

import workoutTracker from "./workoutTracker.js";

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

new workoutTracker(app);

JS (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 >
      <thead>
        <tr>
          <th>Date</th>
          <th>Workout</th>
          <th>Duration</th>
          <th></th>
        </tr>
      </thead>
      <tbody >
      </tbody>
      <tbody>
        <tr >
          <td colspan="4">
            <button >Add Entry &plus;</button>
            <!--<span >Add Entry &plus;</span>-->
          </td>
        </tr>
      </tbody>
    </table>
    `;
  }
}

CodePudding user response：

It's because script tag has src="" not href="" just replace href with src

<script src="main.js" type="module"></script>
<script src="workoutTracker.js" type="module"></script>

CodePudding user response：

Only include the main script where you will be loading your modules with a defer attribute by default which tells the browser to defer the execution of the script until all HTML is done parsing or the alternative is to place the script at the bottom before the end of the body tag which ensures that the script will only be loaded if all the HTML is done parsing(in this case the defer attribute will not be needed). There is no need of including the workoutTracker.js module as it will be loaded once the main module is parsed and executed.

     <script  src="./main.js" type="module"></script>

    <!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" />
            <!-- modules by default use the defer attribute which waits for the HTML to be parsed and before executing the JS or placed inside the body at the end -->
            <!-- if you try to access the element with an id of app  it will be  undefined -->
            <script  src="./main.js" type="module"></script> 
        </head>
        <body>
            <div id="app"></div>
        </body>
    </html>

Use the above snippet and make sure you are loading the workoutTracker.js module correctly