'Javascript remove class="d-none" function not defined HTMLSpanElement.onclick (Uncaught ReferenceError)

I'm trying to link a Javascript remove function (i.e. the ability to hide/unhide a dropdown menu) from a button on my website's navigation bar. When I run my server clicking the button doesn't do anything, and my console is giving me an Uncaught ReferenceError:

Uncaught ReferenceError: showNotifications is not defined 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');
    }
}

The HTML document the function is linked to: 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>

I've tried to remain concise, but please let me know if you need any further code to identify the issue :)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Javascript remove class="d-none" function not defined HTMLSpanElement.onclick (Uncaught ReferenceError)

Sources

Related Questions