Connect javascript file with django in static file

I attach a js file to my Django but have problem bcz JS don't works on website view, when CSS file style Django see. I try looks some toturial but still the same problem. Arrow etc don;t react on any click.

Terminal:

[06/Oct/2022 11:11:50] "GET /home/ HTTP/1.1" 200 3381
[06/Oct/2022 11:11:50] "GET /static/css/style.css HTTP/1.1" 200 773
[06/Oct/2022 11:11:50] "GET /static/image/arrow-left.png HTTP/1.1" 200 375
[06/Oct/2022 11:11:50] "GET /static/image/arrow-right.png HTTP/1.1" 200 306
[06/Oct/2022 11:11:50] "GET /static/image/about-us.png HTTP/1.1" 200 276423
[06/Oct/2022 11:11:50] "GET /static/image/calculate-power.png HTTP/1.1" 200 359596
[06/Oct/2022 11:11:50] "GET /static/image/turbine-models.png HTTP/1.1" 200 730280
[06/Oct/2022 11:11:50] "GET /static/js/home_page.js HTTP/1.1" 200 1167

Home-page template:

    {% extends 'turbineweb/turbineweb_extends.html' %}
    {% load static %}
    
    {% block section_one %}
        <main>
            <div id="slider">
                <div id="top-row">
                    <img class="arrow left-class" id="arrow-left" src="{% static 'image/arrow-left.png' %}" />
                    <div id="slides-container">
                        <img class="slide active" src="{% static 'image/about-us.png' %}">
                        <img class="slide" src="{% static 'image/turbine-models.png' %}">
                        <img class="slide" src="{% static 'image/calculate-power.png' %}">
                    </div>
                    <img class="arrow right-class" id="arrow-right" src="{% static 'image/arrow-right.png' %}" />
                </div>
                <div id="bottom-row">
                    <div id="dots">
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                    </div>
                </div>
            </div>
            <script src="{% static 'js/home_page.js' %}"></script>
        </main>
    
    {% endblock %}

JS:

let activeSlideNumber = 1;
let arrowLeft = document.querySelector('.arrow-left')
let arrowRight = document.querySelector('.arrow-right')

let hideActiveSlide = () => {
    let activeElement = document.querySelector('.active');
    activeElement.classList.remove('active')
}

let showSlide = (slideNumber) => {
    hideActiveSlide();
    document.querySelector('#slide'+slideNumber).classList.add('active')
}

let showNextSlide = () => {
    if(activeSlideNumber === 3) {
        activeSlideNumber = 1;
    } else {
        activeSlideNumber = activeSlideNumber + 1;
    }
    showSlide(activeSlideNumber);
};

let showPreviousSlide = () => {
    if(activeSlideNumber === 1) {
        activeSlideNumber = 3;
    } else {
        activeSlideNumber = activeSlideNumber - 1;
    }
    showSlide(activeSlideNumber);
};

for(let i = 1; i <= 3; i++) {
    let showSlideI = () => {
        activeSlideNumber = 1;
        showSlide(i)
    };
    document.querySelector('#dol'+i).addEventListener('click', showSlideI);
}

arrowLeft.addEventListener('click', showNextSlide);
arrowRight.addEventListener('click', showPreviousSlide);

Project:

  • turbineweb(app)
    • static
      • css
        • style.css
      • image
        • image.png
      • js
        • home_page.js
    • templates
    • init.py
    • admin.py
    • models.py

settings:

# Static files (CSS, JavaScript, Images)

STATIC_URL = '/static/'

instead of this:

 <script src="{% static 'js/home_page.js' %}"></script>

try this:

<script src="{% static '/js/home_page.js' %}"></script>

And correct your typo sttatic to static

In settings file:

STATIC_URL = '/static/'

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

Also in TEMPLATES in settings file, add it:

'libraries' : {
                'staticfiles': 'django.templatetags.static', 
            }

EX:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
            'libraries' : {
                'staticfiles': 'django.templatetags.static', #Added here
            }
        },
    },
]

in my urls.py i configurate static but thats not help - answering on Sunderam Dubey comment

from django.urls import path, include
from django.conf.urls.static import static
from django.conf import settings

from . import views


urlpatterns = [
    path('home/', views.home_page, name='home_page'),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

after add in setttings:

STATIC_URL = '/static/'

STATICFILES_DIRS = [BASE_DIR / "static"]

needed to remove STATIC_ROOT


Ctrl + U give me it:

<! DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title> Turbine Power Web </title>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="TurbinePowerWeb let u choose turbine model adding by turbine manufacturer
        and check their energy production in a given period of time"/>
        <link href="/static/css/style.css" rel="stylesheet" type="text/css">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    </head>
    
    <body>
        <section>
                        <!-- Navbar -->
            <nav class="navbar navbar-expand-lg bg-dark navbar-dark ">
              <!-- Container wrapper -->
              <div class="container-fluid justify-content-center">
                <!-- Navbar brand -->
                <a class="navbar-brand" href="/home/"> Turbine Power Web</a>

                  <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ms-auto">
                        
                            <li class="nav-item"><a class="nav-link" href="/logout/">Logout</a></li>
                            <li class="nav-item"><a class="nav-link" href="/password-change/">Change Password</a></li>
                        
                            <li class="nav-item"><a class="nav-link" href="">Turbine Models</a></li>
                            <li class="nav-item"><a class="nav-link" href="">Author</a></li>
                        
                            <li class="nav-item"> Hello, Tester </li>
                    </ul>
                </div>
              </div>
            </nav>
        </section>
    
        <div class="bg">
        
    <main>
        <div id="slider">
            <div id="top-row">
                <img class="arrow left-class" id="arrow-left" src="/static/image/arrow-left.png" />
                <div id="slides-container">
                    <img class="slide active" src="/static/image/about-us.png">
                    <img class="slide" src="/static/image/turbine-models.png">
                    <img class="slide" src="/static/image/calculate-power.png">
                </div>
                <img class="arrow right-class" id="arrow-right" src="/static/image/arrow-right.png" />
            </div>
            <div id="bottom-row">
                <div id="dots">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
            </div>
        </div>
        <script src="/static/js/home_page.js"></script>
    </main>



        </div>
            

            
    </body>
</html>

I think I found the solution. We were looking at the wrong place. Your Django settings are correct. It's your js file which selects the wrong button:

Change:

let arrowLeft = document.querySelector('.arrow-left')
let arrowRight = document.querySelector('.arrow-right')

To:

let arrowLeft = document.getElementById('arrow-left')
let arrowRight = document.getElementById('arrow-right')

Edit

I took a closer look at your js file and found some missing selectors.

I've added id="sliderX" and id="dotX". Without them your js threw an error and was never executed.

<main>
    <div id="slider">
        <div id="top-row">
            <img class="arrow left-class" id="arrow-left" src="/static/image/arrow-left.png" />
            <div id="slides-container">
                <img class="slide active" id="slide1" src="/static/image/about-us.png">
                <img class="slide" id="slide2" src="/static/image/turbine-models.png">
                <img class="slide" id="slide3" src="/static/image/calculate-power.png">
            </div>
            <img class="arrow right-class" id="arrow-right" src="/static/image/arrow-right.png" />
        </div>
        <div id="bottom-row">
            <div id="dots">
                <div class="dot" id="dot1"></div>
                <div class="dot" id="dot2"></div>
                <div class="dot" id="dot3"></div>
            </div>
        </div>
    </div>
    <script src="/static/js/home_page.js"></script>
</main>

I didn't change your js other then the change I mentioned at the top of this post.

Sidenote: Rightclick in your Chrome Browser > Inspect and then at the top of the Sidebar click of "Console". Here you will see all js erros including reference for debugging.

Back to Top