python - how to load javascript in django templates

Question

i'm trying to apply my JS file to templates but it doesn't applied. i tried using

<script src="{% static 'js/main.js' %}" type="text/javascrpit"></script>

instead of

<link rel="stylesheet" href="{% static 'js/main.js' %}">

plus stored my static files in my app folder instead of root directory

HTML

{% load static%}
<!-- css -->

<link rel="stylesheet" href="{% static 'css/main.css' %}">

<!-- js -->
<link rel="stylesheet" href="{% static 'js/main.js' %}">

JS

const searchBtn = document.querySelector(".search_btn")
const cancelBtn = document.querySelector(".cancel_btn")
//const searchBtn = document.querySelector(".search_btn")
const searchBox = document.querySelector(".searchBox")

searchBtn.onclick = () =>{
    searchBox.classList.add("active");
}

settings.py

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'statics'),
    os.path.join(BASE_DIR, 'vendor'),
]

and

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['templates'], .....

directory

[error code][2]

django: 3.1.5 python: 3.8.5

Error:

Resource interpreted as Stylesheet but transferred with MIME type application/javascript: "htt 127.0.0.1/:20p://127.0.0.1:8000/static/js/main/js

Answer 1

等待大神答复