Question

我的剧本有问题。

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

这是错误：

未捕获的TypeError：无法读取null的属性'parentNode' 在HTMLAreaElement。

这是硬件页面的HTML：软件页面也有相同的内容，但是有'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正在返回null。 getElementById如果找不到具有相应ID的元素，则返回null。简要查看一下您的页面，即表明您的网页上没有ID为softwareMap的html元素。但是有hardwareMap。

当在硬件页面的链接上运行上面的代码时，没有具有id的软件的元素，但是在软件页面上。如果您打算在两个页面上使用相同的脚本，则应在if语句中进行额外的测试以检查映射是否存在。因此，该陈述将变为if(map && map.parentNode.id) {...}这将使错误无效。

**编辑包含更多的deets。

Answer 2

#softwareMap不在DOM中。

编辑：确切地说，当调用querySelector方法时，选择器#softwareMap与DOM中的任何元素都不匹配。如果有一些操作应该将目标元素放在DOM中，请确保在尝试通过提到的选择器访问它之前调用它。

TypeError：无法读取null的属性parentNode

2 个答案: