title: Cannot read property of "classList" of Null when trying to append text to a DIV in Else If
body: <p>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. </p>
  
  <p>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. </p>
  
  <p>I ended up trying to add the card to a div then check if the div contains the class of the card in it &amp; if it does print out "some text" but that did not work as it gives me an error "cannot read property 'classList' of null". </p>
  
  <p><strong>EDIT/UPDATE:</strong></p>
  
  <p><strong>I changed the code to search for the child elements by doing :</strong></p>
  
  <p><code>if(document.querySelector("#cardResults .card1").classList.contains("card1"))</code></p>
  
  <p>However when I add an else to it the same error occurs again. 
  This is the code that is breaking it now :</p>
  
  <pre><code>         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";
           }
  </code></pre>
  
  <p>I expect the results to look something like this :</p>
  
  <p>Results</p>
  
  <p>How you feel about yourself:</p>
  
  <p>[the hermit card]  : "some text"</p>