I am a beginner in django. I have no problem with the back-end but my front-end has some problem with javascript (specifically addEventListener doesn't work). I've tried everything from adding External js to adding internal js nothing seems to work. But the js connect with django and its being loaded, but the function doesn't work and no error seems to log in the console.

It is just a click function, which should toggle a classname in html while clicked. By the way I'm inheriting my nav file. i hope that doesn't cause any problem.

My internal js file:

    <script type="text/javascript">

    // EVENT LISTENER FOR NAV FUNCTION
    let nav_btn = document.querySelector('.user-pr')
    nav_btn.addEventListener('click', navfunc)
    function navfunc() {
        nav_btn.classList.toggle('active')
        console.log("click")
    }
    
</script>

My Settings.py file (Static Config):

STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'),]
STATIC_ROOT = os.path.join(BASE_DIR, 'Assets')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

I've checked StackOverflow for similar questions, but nothing match my scenario.