Два оператора if-if приводят к ошибкам в JavaScript - PullRequest
Новая
       22

Два оператора if-if приводят к ошибкам в JavaScript

0 голосов
/ 09 октября 2019

В моем коде есть два оператора else-if. Когда я добавил другой оператор else-if, первый из них привел к ошибке. Когда я его забрал, все работало просто отлично. У меня есть несколько условий для каждого оператора if-if, хотя я почти уверен, что не установил условия, как я должен. Если пользователь выберет правильные условия, перечисленные в операторе, он превратит изображение и его текст в гибкий. Я чувствую, что не использую && и ||операторы правильно в моих условиях и может быть поэтому ошибка происходит, но я не уверен. Я пытался возиться с && и ||операторы в моем состоянии но ничто не помогает. Я получаю сообщение об ошибке «Не удается прочитать свойство, выбранное из 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>

1 Ответ

3 голосов
/ 09 октября 2019

Из этого jsfiddle: https://jsfiddle.net/7jLnvhd1/

Я не могу сказать, в чем ваша проблема на самом деле.

Я изменил <option id = 3/3">I guess</option>

на <option id = "3/3">I guess</option>

и добавил $(document).ready() в вашем JS.

...