I have a piece of javascript code that is switching between two different views of articles.

When I load the article index page I get the following error:

Uncaught ReferenceError: filterArticleToggle is not defined

I don't know what I have done wrong. I'm using the same code for profile pages and it works fine:

filterArticleToggle = function () {
    const grid_articles_button = document.querySelector('#grid_articles')
    const list_articles_button = document.querySelector('#list_articles')
    const grid_articles_icon = document.querySelector('#grid_articles_icon')
    const list_articles_icon = document.querySelector('#list_articles_icon')
    const grid_articles_view = document.querySelector('#grid_articles_view')
    const list_articles_view = document.querySelector('#list_articles_view')

    if (grid_articles_button && list_articles_button) {
        grid_articles_button.addEventListener('click', (e) => {
            e.preventDefault()

            grid_articles_icon.classList.add('text-brand-blue')
            grid_articles_icon.classList.remove('text-inherit')

            list_articles_icon.classList.remove('text-brand-blue')
            list_articles_icon.classList.add('text-inherit')

            fetch("/articles/switch_view/Grid").then(function(response) {
                return "ok"
            })

            grid_articles_view.classList.value = "sm:-mx-6 lg:-mx-0 flex flex-wrap"
            list_articles_view.classList.value = 'hidden'
        })

        list_articles_button.addEventListener('click', (e) => {
            e.preventDefault()

            grid_articles_icon.classList.remove('text-brand-blue')
            grid_articles_icon.classList.add('text-inherit')

            list_articles_icon.classList.add('text-brand-blue')
            list_articles_icon.classList.remove('text-inherit')

            fetch("/articles/switch_view/List").then(function(response) {
                return "ok"
            })

            list_articles_view.classList.value = "sm:-mx-6 lg:-mx-0 flex flex-wrap"
            grid_articles_view.classList.value = 'hidden'
        })
    }
}

document.addEventListener('turbolinks:load', () => {
    filterArticleToggle()
})

window.filterArticleToggle = filterArticleToggle

This is in an article.js file that is being loaded in as the article index page loads.

Any help would be appreciated.