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 && 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 && and || operators in my condition but nothings helping. I keep getting a "can't read property selected of null " error.
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>From this jsfiddle: https://jsfiddle.net/7jLnvhd1/
I can't tell what your issue actually is.
I changed <option id = 3/3">I guess</option>
to
<option id = "3/3">I guess</option>
and added $(document).ready() within your JS.