我的脚本有问题。

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

这是我使用的 javascript：

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;  
            };  
        });
    }
}

这是错误：

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

这是硬件页面的 HTML： 软件页面也是如此，但 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>