JavaScript dynamic fields not working in HTML form (module-eval-bd)

[FleshThrone]

Select Topic Area

Question

Body

Here is the repo: https://github.com/fleshthrone/module-eval-bd
Link to the website: https://module-eval-bd.pages.dev/
Gist: https://gist.github.com/FleshThrone/650567e41c7d1adf4444e833f6e1f4dc

JavaScript not working in my project module-eval-bd (dynamic fields not functional)

Project Description

I’m developing a module called module-eval-bd, which is a platform for evaluating purchase or sale prices of comic books.
The project includes HTML, CSS, JavaScript, and Python.
The goal: allow users to fill in several fields, some of which should be dynamic (automatic addition/removal of fields).

---

Issue

• HTML and CSS seem to work correctly.
• JavaScript does not work: no dynamic fields appear or react.
• All the necessary code is in script.js, but nothing triggers.

---

What I’ve Checked

• The script is correctly linked in the HTML
• IDs in HTML match those used in JS.
• Added console.log() inside the function → nothing shows.
• Tested on Chrome (Windows 11).

---

Question

What should I check or fix so that my JavaScript works and dynamic fields display correctly in my module-eval-bd project?
Could this be a DOM loading issue, a script linking problem, or something else? I have no idea where the problem comes from, so I suggest you read the entire script.
I'm French-speaking native, which explains the French language used in my code.

---

Environment

OS: Windows 11
Editor: Visual Studio Code
Browsers tested: Chrome
Languages used: HTML, CSS, JavaScript, Python

[Danindu05]

I checked your repo and website — the HTML and CSS load fine, but the issue with your dynamic fields is likely due to one of these JavaScript loading problems:

1. Script loading before DOM is ready

Your script.js might be running before the HTML elements exist.
Try adding the defer attribute in your HTML file:

<script src="script.js" defer></script>

Or wrap your JS in a DOMContentLoaded event:

document.addEventListener("DOMContentLoaded", () => {
// your dynamic field logic here
});

2. Wrong or missing script path

In GitHub Pages, file paths are case-sensitive.
If your script tag uses something like:

<script src="Script.js"></script>

but your actual file is script.js, it won’t load.
Open the browser console (F12 → Console) and check if you see a “Failed to load resource” or 404 error.

3. JavaScript execution blocked by CSP

Since you’re hosting on Cloudflare Pages, check if any security headers (Content Security Policy) are blocking inline or external JS.
You can verify this in Network → Headers → Response Headers in DevTools.

4. Check console errors and verify execution

Add this line at the top of script.js:

console.log("Script loaded!");

If you don’t see it in the browser console, the JS file isn’t loading at all.

5. Verify dynamic field selectors

If your JS relies on specific IDs or classes (like #add-field or .dynamic-input), confirm they match exactly in the HTML. Even small typos (like a dash instead of underscore) will silently break querySelector() calls.

Once you confirm the script is actually being executed (via console log), we can focus on the event-handling logic itself. But right now, it looks like the JS file isn’t running or is running before the DOM exists.