Unable to Load Content from JS to HTML

starzeta 0
Viewed 53

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 class="tracker">
            <thead>
              <tr>
                <th>Date</th>
                <th>Workout</th>
                <th>Duration</th>
                <th></th>
              </tr>
            </thead>
            <tbody class="tracker__entries">
              <tr class="tracker__row">
                <td><input type="date" class="tracker__date" /></td>
                <td>
                  <select type="text" class="tracker__workout">
                    <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" class="tracker__duration" />
                  <span class="tracker__text">minutes</span>
                </td>
                <td>
                  <button type="button" class="tracker__button">&times;</button>
                </td>
              </tr>
            </tbody>
            <tbody>
              <tr class="tracker__row tracker__row--add">
                <td colspan="4">
                  <button class="tracker__add">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 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>
            <!--<span class="tracker__add">Add Entry &plus;</span>-->
          </td>
        </tr>
      </tbody>
    </table>
    `;
  }
}
tracker performance javascript css html
3 Answers

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>
sarfaraj shah0

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 -->
            <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

404Xavier60

Replace "Script href"'s with "Script src"'s. Also move those script elements above closing "body" element. (just like at following)

<script src="main.js" type="module"></script>
<script src="workoutTracker.js" type="module"></script>
</body>
Aykut Bayram0
Related