Uncaught TypeError: Cannot read property 'querySelectorAll' of null

Hi there, I am getting an error in my jQuery code and I don't really know why...

So I get the following error in my console on all the pages: http://prntscr.com/mp4ch0

The problem is the 'querySelectorAll' but I don't know what's wrong with it..

Full Code

var map = document.querySelector('#map')

var paths = map.querySelectorAll('.map-image a')

var links = map.querySelectorAll('.map-list a')


if(NodeList.prototype.forEach === undefined){
  NodeList.prototype.forEach = function (callback){
    [].forEach.call(this, callback)
  }
}


paths.forEach(function (path){
  path.addEventListener('mouseenter', function () {
    var id = this.id.replace('region-','')

    map.querySelectorAll('.is-active').forEach(function (item){
      item.classList.remove('is-active')
    })

    document.querySelector('#list-' + id).classList.add('is-active')
    document.querySelector('#region-' + id).classList.add('is-active')
  })

  path.addEventListener('mouseleave', function () {

    map.querySelectorAll('.is-active').forEach(function (item){
      item.classList.remove('is-active')
    })
  })

})


links.forEach(function (link){
  link.addEventListener('mouseenter', function () {
    var id = this.id.replace('list-','')

    map.querySelectorAll('.is-active').forEach(function (item){
      item.classList.remove('is-active')
    })

    document.querySelector('#list-' + id).classList.add('is-active')
    document.querySelector('#region-' + id).classList.add('is-active')
  })

  link.addEventListener('mouseleave', function () {
    map.querySelectorAll('.is-active').forEach(function (item){
      item.classList.remove('is-active')
    })

  })

})

Thanks!!

michapietsch

7 years ago

Level 10

Hi Ibe,

I assume this happens on line 3, possibly because on line 1 var map = document.querySelector('#map') could not assign map correctly.

Please first make sure that the element id="map" exists.

Maybe try another syntax like var map = document.getElementById('map') although what you've written should be correct as well.

If you can't make progress try debugging it so far, that you can say which line exactly causes the error and maybe you can check the execution step by step.

1 like

Ibe

7 years ago

Level 1

@michapietsch Hi there, thanks already for the help. I've tried debugging it and it shows a problem with this line:

var paths = map.querySelectorAll('.map-image a');

More specific this part: .querySelectorAll('.map-image a');

Do you know what's wrong?

michapietsch

7 years ago

Level 10

This confirms my suspicion. As the error reads: map is null at that time. So obviously line 1 which reads var map = document.querySelector('#map') is not correct. Please make sure to correctly query the map element.

1 like

Ibe

7 years ago

Level 1

@michapietsch I've changed the first line with getElementById('map'). But what do I have to change on the second line? Does it depends on my structure in blade.php..? Srry I'm kinda nub at this..

michapietsch

7 years ago

Level 10

@ibe The second line is ok.

The map element cannot be queried. So my guess is it's not even there. Maybe it loads just a bit after your JS executes.

How do you get the #map element into your HTML? Is it a map service like Google Maps or Leaflet?

benzizah

6 years ago

Level 1

the problem comes in the first line, just change var mapp = document.querySelector('#map') to var mapp = document.querySelector('.map'), you have to create a class map in your div which content whatever in.

olivsinz

3 years ago

Level 3

The node with the id #map is not present in the DOM at the time the JS code is executed. If the HTML code is in the same file as the JS code then the JS code section should be moved to the bottom of the file. Otherwise, make sure to load the JS code after the node is created in the DOM.

1 like

Please or to participate in this conversation.