title: Two else-if statements result in errors in javascript
body: <p>I have two else-if statements in my code. When I added the other else-if statement the first one resulted in an error. When I took it away, it was working just fine. I have multiple conditions for each else-if statement although I'm pretty sure I didn't set-up the conditions like I'm supposed to. If the user selects the right conditions listed in the statement it will turn an image and its text to display flex. I feel that I'm not using the &amp;&amp; and || operators correctly in my conditions and maybe that's why the error is occurring, but I'm not sure. I've tried messing around with the &amp;&amp; and || operators in my condition but nothings helping. I keep getting a "can't read property selected of null " error.  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById("2");
  document.getElementById("3");
  document.getElementById("4");
  function emotion() {
   if( document.getElementById("1/1").selected === true &amp;&amp; document.getElementById("2/1").selected === true &amp;&amp; document.getElementById("3/1").selected === true &amp;&amp; document.getElementById("4/2").selected === true ) {
    document.querySelector('.happy').style.display = 'flex';
    document.querySelector('.htext').style.display = 'flex';
   } else if (document.getElementById("1/3").selected === true &amp;&amp; document.getElementById("2/2").selected === true || document.getElementById("2/3").selected === true || document.getElementById("3/3").selected === true &amp;&amp; document.getElementById("4/1").selected === true || document.getElementById("4/2").selected === true) {
    document.querySelector('.okay').style.display = 'flex';
    document.querySelector('.otext').style.display = 'flex';
   } else if (document.getElementById("1/4").selected === true || document.getElementById("1/5").selected === true &amp;&amp; document.getElementById("3/4").selected === true &amp;&amp; document.getElementById("4/1").selected === true || document.getElementById("4/2").selected === true ) {
    document.querySelector('.sad').style.display = 'flex';
    document.querySelector('.text').style.display = 'flex';
   }
    
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.happy {
     position:absolute;
     left:520px;
     display:none;
    }
    .htext {
     position:relative;
     left:285px;
     top:250px;
     display:none;
    }
    .okay {
     position:absolute;
     left:520px;
     display:none;
    }
    .otext {
     position:relative;
     left:205px;
     top:250px;
     display:none;
    }
    .sad {
     position:absolute;
     left:520px;
     display:none;
    }
    .stext {
     position:relative;
     left:305px;
     top:250px;
     display:none;
     }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;Emotion Tester&lt;/title&gt;
    &lt;/head&gt;
  &lt;body&gt;
  &lt;h1 align = "center"&gt;Hey there! How are you feeling today? Answer the questions below to determine your mood!  &lt;/h1&gt;
  &lt;p&gt;PLEASE REFRESH EVERYTIME YOU PUT NEW INPUT!!&lt;/p&gt;
  &lt;p&gt;How was your day today?&lt;/p&gt;
  &lt;select id = "1"&gt;
   &lt;option id = "1/1"&gt;It was amazing!&lt;/option&gt;
   &lt;option id = "1/2"&gt;It was good&lt;/option&gt;
   &lt;option id = "1/3"&gt;Fine&lt;/option&gt;
   &lt;option id = "1/4"&gt;Wasn't good...&lt;/option&gt;
   &lt;option id = "1/5"&gt;Horrible :(&lt;/option&gt;
  &lt;/select&gt;
  &lt;p&gt;Are you worried?&lt;/p&gt;
  &lt;select id = "2"&gt;
   &lt;option id = "2/1"&gt;Not at all!&lt;/option&gt;
   &lt;option id = "2/2"&gt;Yes, very&lt;/option&gt;
   &lt;option id = "2/3"&gt;A little...&lt;/option&gt;
  &lt;/select&gt;
  &lt;p&gt;Are you happy with life?&lt;/p&gt;
  &lt;select id = "3"&gt;
   &lt;option id = "3/1"&gt;My life is great!&lt;/option&gt;
   &lt;option id = "3/2"&gt;It's a good life&lt;/option&gt;
   &lt;option id = 3/3"&gt;I guess&lt;/option&gt;
   &lt;option id = "3/4"&gt;Not at all&lt;/option&gt;
  &lt;/select&gt;
  &lt;p&gt;Are you mad at someone?&lt;/p&gt;
  &lt;select id = "4"&gt;
   &lt;option id = "4/1"&gt;YES!&lt;/option&gt;
   &lt;option id = "4/2"&gt;Nope :)&lt;/option&gt;
  &lt;/select&gt;
  &lt;button onclick = "emotion()"&gt;SUBMIT&lt;/button&gt;
  &lt;img src="https://s3.gifyu.com/images/happy-emoji.gif" class = "happy" width = "300px" height = "300px"&gt;
  &lt;h2 class = "htext"&gt;Seems like you're mood is HAPPY! You're happy with life and have a positive attitude&lt;/h2&gt;
  &lt;img src="https://s3.gifyu.com/images/giphy-12e8027bed3a7ae23.gif" class = "okay" width = "300px" height = "300px"&gt;
  &lt;h2 class = "otext"&gt;It seems that you're day was just OKAY. You might feel upset, tired, or a little stressed. 
  Maybe you're just confused, like this emoji!.&lt;/h2&gt;
  &lt;img src="https://s3.gifyu.com/images/sad-emoji9181fba54a527d19.gif" class = "sad" width = "300px" height = "300px"&gt;
  &lt;h2 class = "stext"&gt;Seems like your day wasn't the best. You may be sad or stressed.&lt;/h2&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>