TypeError: Cannot read property parentNode of null

Question

I have a problem with my script.

http://danny.b.cmmstudents.nl/MM-4/pages/hardware.html

This is the javascript I am using:

var imgPad = "../media/images/";
var canSwap = document.images ? true : false;

var mapAreas = document.getElementsByClassName('iphoneLink');
var eventList = ['mouseover', 'mouseout', 'click', 'touchstart'];
var map = document.getElementById('softwareMap');

var informatieHeading = document.getElementById('informatieHeading');
var informatiePar = document.getElementById('informatiePar');

for(var i=0; i<mapAreas.length; i++){
   for(theEvent of eventList){          
        mapAreas[i].addEventListener(theEvent, function(e){
            if(e.type == 'mouseover'){
                if(map.parentNode.id == "softwareMap"){
                    var checkDb = hwItems[this.getAttribute("data-dbId")].afbeelding;
                    swapImage("mainImg", checkDb); // Perform function 
                } else{
                    var checkDb = swItems[this.getAttribute("data-dbId")].afbeelding;
                    swapImage("mainImg", checkDb); // Perform function 
                } 
            } else if (e.type == 'mouseout'){
                 if(map.parentNode.id == "softwareMap"){
                    swapImage("mainImg", 'iphonex.png'); // Perform function 
                } else{
                    swapImage("mainImg", 'iphonexInside.png'); // Perform function 
                }
            } else if(e.type == 'click'){
                if(map.parentNode.id == "softwareMap"){
                    informatieHeading.textContent = swItems[this.getAttribute("data-dbId")].titel;
                    informatiePar.textContent = swItems[this.getAttribute("data-dbId")].omschrijving;
            } else{
                    informatieHeading.textContent = hwItems[this.getAttribute("data-dbId")].titel;
                    informatiePar.textContent = hwItems[this.getAttribute("data-dbId")].omschrijving;
                }
            } else if (e.type == 'touchstart'){
                informatieHeading.textContent = hwItems[this.getAttribute("data-dbId")].titel;
                informatiePar.textContent = hwItems[this.getAttribute("data-dbId")].omschrijving;  
            };  
        });
    }
}

This is the error:

Uncaught TypeError: Cannot read property 'parentNode' of null at HTMLAreaElement.

This is the HTML for the hardware page: And there is the same for softwarepage but there is the id 'softwareMap'

<main id="content">
    <div class="iphoneTekst">
      <p>Klik met je vinger op de interactieve iPhone</p>
      <p>Ga met de muis over de interactieve iPhone</p>
    </div>      
   <div id="iphone"><img id="mainImg" src="../media/images/iphonexInside.png" alt="iPhone X" usemap="#hardwareMap" width="772 " height="1472"></div>

    <map id="hardwareMap" name="hardwareMap"><!-- image Map -->
       <area class="iphoneLink" data-dbId="0" alt="" title="" href="#" shape="rect" coords="570,60,706,325">
       <area class="iphoneLink" data-dbId="1" alt="" title="" href="#" shape="rect" coords="59,1209,347,1316">
       <area class="iphoneLink" data-dbId="2" alt="" title="" href="#" shape="rect" coords="498,34,550,114">
       <area class="iphoneLink" data-dbId="3" alt="" title="" href="#" shape="rect" coords="449,1358,678,1433">
       <area class="iphoneLink" data-dbId="4" alt="" title="" href="#" shape="poly" coords="66,235,417,233,420,829,625,837,626,1201,57,1205">
   </map>
   <article id="informatie"><!-- Div wordt ingeladen met info van de iphone-database.js -->
       <div>
           <h2 id="informatieHeading">iPhone X</h2>
           <p id="informatiePar">We hebben altijd al een iPhone willen maken die één en al scherm is. Een iPhone waar je zo in opgaat dat je je er helemaal in verliest. Eentje die zo intelligent is dat hij reageert op een tikje, je stem of zelfs je blik. Met iPhone X hebben we dit doel nu bereikt.<br>Welkom in de toekomst.</p>
        </div>
    </article>
    <div class="ctaBackToTop"><a href="#iphone">Back to top</a></div>
</main>

Answer 1

map is being returned null. getElementById returns null if is can't find an element with a corresponding id. A brief look at your page shows that there is no html element on your page with an id of softwareMap. There is however a hardwareMap.

When the above code is run on the link to the hardware page, there is no element with an id of softwareMap, there is however on the software page. If you are intending on using the same script above on both pages you should put in an additional test in your if statements to check if map exists. Hence the statement would become if(map && map.parentNode.id) {...} That would silence the error.

** Edited to include more deets.

Answer 2

#softwareMap is not in the DOM.

Edit: To be precise, the selector #softwareMap does not match any element in the DOM when the querySelector method is called. If there is some operation that should place the target element in the DOM, make sure that it is called before you try to access it via selector mentioned.