Javascript static not working

Using Django Mystery Errors
1

Hello, im creating a fast MVP for my portfolio but my site is not loading my static js script here i have my html template

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flight Radar</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="{% static 'perflight/styles.css' %}">
  <script type="module" src="{% static 'perflight/script.js' %}"></script>
</head>

<body>
  
  <div class="container border text-center top-50 start-50 translate-middle position-absolute p-4">
    <h2 class="mb-3 text-light">✈️ Flight Radar</h2>
    <form target="_self" action="{% url 'handle' %}" method="post" class="p-4">
      {% csrf_token %}
      {{ form }}
      <br>
      <input type="submit" value="Track Flight">
    </form>
  </div>

</body>

</html>

i dont know what i’m doing wrong, because i’m doing the same with my css files and those are working

2

Welcome @richardGonzalez-std !

We’re going to need more information to try to help you with this.

What are you looking at that is leading you to this conclusion?

Are you getting any errors in your browser about this?

If you’re getting 404s in your server console for these requests, please show them here.

Also show where this file resides within your project.

3

yes, first in the chrome devtool is returning this error every time i submit the form requests.js:1 POST http://127.0.0.1:8000/home/{%%20url%20’handle’%20%} 404 (Not Found).
This is only happening when i have the script.js loading from the static files, if i have it inside the script tag all the code works efficiently and not bug or error appears.

and my project structure is just a basic django structure, here i share it on a screenshot. dont pay attention to the views.py error is just a try clause that i have there alone with no code inside meanwhile i resolve the static solution

image
image295×592 3.21 KB

4

This is not saying that the JavaScript isn’t loading - the JavaScript is loading, but has an error in it.

Post the contents of your script.js file.

6

Do not post images of code here. Copy/paste the code into your message like you did in your original message.

7

sorry it was deleted by the bot, here is the javascript code

const formData = document.querySelectorAll('form');

    document.addEventListener('DOMContentLoaded', () => {
      formData.forEach(form => {
        form.addEventListener('submit', async (e) => {
          e.preventDefault();
        });

      });
    });

i dont know if is the code because when i paste it on the script tag it works as is supposed to do

8

it looks like the problem was declaring the const before the DOM event, i moved the DOMLoaded event to the line 1 and the const to the line 2 and got solved