javascript - TypeError: Cannot read property parentNode of null - Stack Overflow

admin管理员组

文章数量:1415061

I have a problem with my script.

.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>

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>

• javascript

Share Improve this question Follow edited Jan 31, 2018 at 20:40 DannyB asked Jan 31, 2018 at 20:20 DannyBDannyB 1111 gold badge11 silver badge22 bronze badges 5

• 1 softwareMap doesn't exist in your HTML source code. – Ele Commented Jan 31, 2018 at 20:22
• Show us the html please. – Train Commented Jan 31, 2018 at 20:25
• 1 I'm looking at your link, I don't see softwareMap anywhere in the console. – Train Commented Jan 31, 2018 at 20:26
• This question posts HTML and JavaScript that the OP states don't actually go together. Until the question is corrected to show code that go together, it makes no sense. Voting to close. – Scott Marcus Commented Jan 31, 2018 at 21:00
• I'm voting to close this question as off-topic because the JavaScript doesn't go with the HTML. – Scott Marcus Commented Jan 31, 2018 at 21:00

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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 bee if(map && map.parentNode.id) {...} That would silence the error.

** Edited to include more deets.

#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.

本文标签： javascriptTypeError Cannot read property parentNode of nullStack Overflow