lundi 26 août 2019

Cannot read property of "classList" of Null when trying to append text to a DIV in Else If

I am creating a card game in which the user will chose 3 cards and then the cards picked are added to an array called "chosenCards". I am then printing out the cards accordingly to their index number into a new DIV. I want to be able to say basically "if the chosenCard[0] has a div class of 'card1' then print out "some text" to the DIV.

I tried to accomplish this various ways but could not figure out how to compare the div within the array or a way to use switch cases.

I ended up trying to add the card to a div then check if the div contains the class of the card in it & if it does print out "some text" but that did not work as it gives me an error "cannot read property 'classList' of null".

I have included a codepen and the section that is giving me an issue. https://codepen.io/cramos2/pen/pMVjez?editors=1010

EDIT/UPDATE:

I changed the code to search for the child elements by doing :

if(document.querySelector("#cardResults .card1").classList.contains("card1"))

However when I add an else to it the same error occurs again. This is the code that is breaking it now :

         document.getElementById("re").innerHTML = "The Hermit suggests that you are in a phase of introspection where you are drawing your attention inwards and looking for answers within. You are in need of a period of inner reflection, away from the current demands of your position.";
         }
         else if(document.querySelector("#cardResults .card2").classList.contains("card2")){
           document.getElementById("re").innerHTML = "You are a fool";
         }

         else {
          document.getElementById("re").innerHTML = "error";
         }

I expect the results to look something like this :

Results

How you feel about yourself:

[the hermit card] : "some text"

Aucun commentaire:

Enregistrer un commentaire