两个 else-if 语句导致 javascript 中的错误

Question

我的代码中有两个 else-if 语句。当我添加另一个 else-if 语句时，第一个导致错误。当我把它拿走时，它工作得很好。我对每个 else-if 语句都有多个条件，尽管我很确定我没有像我应该的那样设置条件。如果用户选择语句中列出的正确条件，它将把图像及其文本显示为 flex。我觉得我没有使用 && 和 ||操作员在我的条件下正确，也许这就是发生错误的原因，但我不确定。我试过搞乱 && 和 ||操作员在我的情况下，但没有任何帮助。我不断收到 "can't read property selected of null " 错误。

document.getElementById("2");
document.getElementById("3");
document.getElementById("4");
function emotion() {
 if( document.getElementById("1/1").selected === true && document.getElementById("2/1").selected === true && document.getElementById("3/1").selected === true && 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 && document.getElementById("2/2").selected === true || document.getElementById("2/3").selected === true || document.getElementById("3/3").selected === true && 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 && document.getElementById("3/4").selected === true && document.getElementById("4/1").selected === true || document.getElementById("4/2").selected === true ) {
  document.querySelector('.sad').style.display = 'flex';
  document.querySelector('.text').style.display = 'flex';
 }
  
}

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

<!DOCTYPE html>
<html>
<head>
 <title>Emotion Tester</title>
  </head>
<body>
<h1 align = "center">Hey there! How are you feeling today? Answer the questions below to determine your mood!  </h1>
<p>PLEASE REFRESH EVERYTIME YOU PUT NEW INPUT!!</p>
<p>How was your day today?</p>
<select id = "1">
 <option id = "1/1">It was amazing!</option>
 <option id = "1/2">It was good</option>
 <option id = "1/3">Fine</option>
 <option id = "1/4">Wasn't good...</option>
 <option id = "1/5">Horrible :(</option>
</select>
<p>Are you worried?</p>
<select id = "2">
 <option id = "2/1">Not at all!</option>
 <option id = "2/2">Yes, very</option>
 <option id = "2/3">A little...</option>
</select>
<p>Are you happy with life?</p>
<select id = "3">
 <option id = "3/1">My life is great!</option>
 <option id = "3/2">It's a good life</option>
 <option id = 3/3">I guess</option>
 <option id = "3/4">Not at all</option>
</select>
<p>Are you mad at someone?</p>
<select id = "4">
 <option id = "4/1">YES!</option>
 <option id = "4/2">Nope :)</option>
</select>
<button onclick = "emotion()">SUBMIT</button>
<img src="https://s3.gifyu.com/images/happy-emoji.gif" class = "happy" width = "300px" height = "300px">
<h2 class = "htext">Seems like you're mood is HAPPY! You're happy with life and have a positive attitude</h2>
<img src="https://s3.gifyu.com/images/giphy-12e8027bed3a7ae23.gif" class = "okay" width = "300px" height = "300px">
<h2 class = "otext">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!.</h2>
<img src="https://s3.gifyu.com/images/sad-emoji9181fba54a527d19.gif" class = "sad" width = "300px" height = "300px">
<h2 class = "stext">Seems like your day wasn't the best. You may be sad or stressed.</h2>
</body>
</html>

Answer 1

来自这个 jsfiddle：https://jsfiddle.net/7jLnvhd1/

我无法确定您的问题到底是什么。

我改了<option id = 3/3">I guess</option>

至 <option id = "3/3">I guess</option>

并在您的 JS 中添加了 $(document).ready()。

两个 else-if 语句导致 javascript 中的错误

Two else-if statements result in errors in javascript

html

javascript

if-statement

operators

animated-gif