Подключение файла javascript к django в статическом файле

Я прикрепляю js файл к моему Django, но у меня проблема, потому что JS не работает при просмотре сайта, когда Django видит стиль CSS файла. Я пробовал смотреть некоторые тотуриалы, но все та же проблема. Стрелки и т.д. не реагируют на нажатие.

Терминал: 

[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

Шаблон домашней страницы:

    {% 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);

Проект:

  • turbineweb(app)
    • статический
      • css
        • style.css
      • изображение
        • image.png
      • js
        • home_page.js
    • templates
    • init.py
    • admin.py
    • models.py

настройки: 

# Static files (CSS, JavaScript, Images)

STATIC_URL = '/static/'

вместо этого: 

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

попробуйте это: 

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

И исправьте свою опечатку sttatic на static

В файле настроек:

STATIC_URL = '/static/'

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

Также в TEMPLATES в файле настроек, добавьте его:

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

в моем urls.py я настроил static, но это не помогло - ответ на комментарий Sunderam Dubey

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)

после добавления настроек:

STATIC_URL = '/static/'

STATICFILES_DIRS = [BASE_DIR / "static"]

необходимо удалить STATIC_ROOT

Ctrl + U дай мне это:

Кажется, я нашел решение. Мы смотрели не туда. Ваши настройки Django верны. Это ваш js файл, который выбирает неправильную кнопку:

Изменение: 

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

Редактировать

Я внимательно изучил ваш js-файл и обнаружил некоторые отсутствующие селекторы.

Я добавил id="sliderX" и id="dotX". Без них ваш js выбросил ошибку и не был выполнен.

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

Я не изменял ваш js, кроме изменения, которое я упомянул в верхней части этого сообщения.

Примечание: Щелкните правой кнопкой мыши в браузере Chrome > Inspect, а затем в верхней части боковой панели нажмите "Console". Здесь вы увидите все ошибки js, включая ссылки для отладки.

Вернуться на верх