Welcome to the Linux Foundation Forum!

Feedback: Exploring Service - Mocking Quick File Server (2)

indymaat
indymaat Posts: 1
edited September 2024 in LFW111 Class Forum

When following the course LFW111 in chapte Exploring Service - Mocking Quick File Server (2) i think i found some mistakes:

Files are referred to as Folder's:

The second step is to create two files inside the static folder labeled index.html and app.js. Place the respective code into each file as shown below:
---------------------------------------------------------------------------
index.html Folder:
---------------------------------------------------------------------------
<html>
    <head>

I think it should say: index.html File: instead of index.html Folder:. Be aware that this is also the case for app.js Folder: should become app.js File: to avoid confusion.

Not waiting for DOMContentLoaded event results in not finding the fetch button

When creating a new file server using the static npm package. Some JavaScript is added. But because the DOM is not loaded, the button with id fetch cannot be found. An event listener should be added to wait for the DOM content to be loaded. Something like so:

addEventListener("DOMContentLoaded", () => {
  document.getElementById("fetch").addEventListener("click", async () => {
    await populateProducts();
  });
});

Comments

  • alexander.k
    alexander.k Posts: 1

    But because the DOM is not loaded, the button with id fetch cannot be found. An event listener should be added to wait for the DOM content to be loaded. Something like so:

    addEventListener("DOMContentLoaded", () => {
  document.getElementById("fetch").addEventListener("click", async () => {
    await populateProducts();
  });
});

    Hi,
    As I understand it, js-modules which are loaded as

    <script type="module">

    are deferred and what that means is that those modules are executed right before DOMContentLoaded event is fired and after document is completely parsed, so there should not be any danger that some elements are not present in the DOM.

    The DOMContentLoaded event fires when the HTML document has been completely parsed, and all deferred scripts (<script defer src="…"> and <script type="module">) have downloaded and executed. It doesn't wait for other things like images, subframes, and async scripts to finish loading.

    https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event

Categories

Upcoming Training