Функция Javascript remove class="d-none" не определена HTMLSpanElement.onclick (Uncaught ReferenceError)

Я пытаюсь связать функцию удаления Javascript (т.е. возможность скрыть/открыть выпадающее меню) с кнопкой на навигационной панели моего сайта. Когда я запускаю свой сервер, нажатие на кнопку ничего не делает, и моя консоль выдает мне Uncaught ReferenceError:

Uncaught ReferenceError: showNotifications не определено at HTMLSpanElement.onclick ((index):61:135)

social.js:

function showNotifications() {
    const container = document.getElementById('notification-container');

    if (container.classList.contains('d-none')) {
        container.classList.remove('d-none');
    } else {
        container.classList.add('d-none');
    }
}

HTML-документ, к которому привязана функция: show_notifications.html:

<div class="dropdown">
    <span class="badge notification-badge" style="background-color: #d7a5eb;" onclick="showNotifications()">{{ notifications.count }}</span>
    <div class="dropdown-content d-none" id="notification-container">
        {% for notification in notifications %}
            {% if notification.post %}
                {% if notification.notification_type == 1 %}
                <div class="dropdown-item-parent">
                    <a href="#">@{{ notification.from_user }} liked your post</a>
                    <span class="dropdown-item-close">&times;</span>
                </div>
                {% elif notification.notification_type == 2 %}
                <div class="dropdown-item-parent">
                    <a href="#">@{{ notification.from_user }} commented on your post</a>
                    <span class="dropdown-item-close">&times;</span>
                </div>
                {% endif %}
            {% elif notification.comment %}
                {% if notification.notification_type == 1 %}
                <div class="dropdown-item-parent">
                    <a href="#">@{{ notification.from_user }} liked on your comment</a>
                    <span class="dropdown-item-close">&times;</span>
                </div>
                {% elif notification.notification_type == 2 %}
                <div class="dropdown-item-parent">
                    <a href="#">@{{ notification.from_user }} replied to your comment</a>
                    <span class="dropdown-item-close">&times;</span>
                </div>
                {% endif %}
            {% else %}
            <div class="dropdown-item-parent">
                <a href="#">@{{ notification.from_user }} has started following you</a>
                <span class="dropdown-item-close">&times;</span>
            </div>
            {% endif %}
            {% endfor %}
        </div>
    </div>

Я старался быть кратким, но, пожалуйста, дайте мне знать, если вам понадобится дополнительный код, чтобы определить проблему :)

Вы должны обернуть условие в eventlistener, чтобы оно сработало.

function showNotifications() {
    const container = document.getElementById('notification-container');

    container.addEventListener('click', function(event) {
       if (container.classList.contains('d-none')) {
         container.classList.remove('d-none');
       }
       else {
         container.classList.add('d-none');
       }
       event.preventDefault();
  })
}
Вернуться на верх