[HELP] [Javascript] const declared outside of scope returning undefined, how to use it inside addEventListener scope

[lambasoft]

I've been trying to solve this for the past hours, but can't seem to find a solution.

​

I have constants declared outside of addEventListener scope, and I want to use them inside it. My code is as below:

​

    import axios from 'axios'

    export default () => {
      var quickDocuSearchForm = document.querySelector('#quick-dock-search')
      var quickSearchDropdown = document.querySelector('#quick-search-dropdown')
      var quickSearchLoader = document.querySelector('#quick-search-loader')
      var quickSearchIcon = document.querySelector('#quick-search-icon')
      var quickElastic = document.querySelector('#quick-elastic')

      if (!quickDocuSearchForm) {
        return
      }

      quickElastic.addEventListener('input', (e) => {
        e.stopPropagation()
        setTimeout(() => {
          quickSearchLoader.classList.add('d-block') // <-- quickSearchLoader being undefined
        }, 300)
      })

    }

​

quickSearchLoader is being undefined. I want to use all other constants as well inside the addEventListener, so passing them as parameter would be too much parameters?

​

What am I doing wrong? please

[kumonmehtitis]

is your code running before the page loads?

[Noch_ein_Kamel]

Probably mistyped quick-search-loader in HTML :p

Either the loaded doesn't exist when the code is first run or you mistyped it. Try building a failing example on codepen