Connect javascript file with django in static file-CodePudding

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  id="arrow-left" src="{% static 'image/arrow-left.png' %}" />
                    <div id="slides-container">
                        <img  src="{% static 'image/about-us.png' %}">
                        <img  src="{% static 'image/turbine-models.png' %}">
                        <img  src="{% static 'image/calculate-power.png' %}">
                    </div>
                    <img  id="arrow-right" src="{% static 'image/arrow-right.png' %}" />
                </div>
                <div id="bottom-row">
                    <div id="dots">
                        <div ></div>
                        <div ></div>
                        <div ></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/'

CodePudding user response：

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')

CodePudding user response：

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
            }
        },
    },
]

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
    </head>
    
    <body>
        <section>
                        <!-- Navbar -->
            <nav >
              <!-- Container wrapper -->
              <div >
                <!-- Navbar brand -->
                <a  href="/home/"> Turbine Power Web</a>

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



        </div>
            

            
    </body>
</html>