1. 技术文章
  2. javascript: evaluating multiple if statements without also running else

javascript: evaluating multiple if statements without also running else

由 ╄→гoц情女王★ 提交于 2019-12-25 00:05:22

问题


i'm trying to throw together a simple javascript page with multiple if statements. the idea is to append to a list based on the evaluation of a stack of if statements. the problem is if any one of them fails, it triggers the else statement. i only want it to trigger else in the case that all of them fail.

<p id="fruit">My fruit basket has: </p>

if (apples) {
        document.getElementById("fruit").innerHTML += "apples";
    }
if (oranges) {
        document.getElementById("fruit").innerHTML += "oranges";
    }
if (bananas) {
        document.getElementById("fruit").innerHTML += "bananas";
    }
else {
        document.getElementById("fruit").innerHTML += "nothing";
}

when i run this and all conditions are met, i'll get:

My fruit basket has: apples oranges bananas

when i run this and no conditions are met, i'll get:

My fruit basket has: nothing

but if any one of the conditions is not met, i'll get:

My fruit basket has: apples nothing

or

My fruit basket has: apples bananas nothing

i've tried using if else, but then it quits after the first 'match'. so in the above example if i have both apples and bananas, using if else will return

My fruit basket has: apples

and not tell me i also have bananas.

question: how do i do this so the else statement is only run in the case that all if statements have failed?

EDIT i tried to make this as simple as i could, but it seems i over simplified it.

the else nothing isn't known until all the if statements have been run. that's literally it's condition: if all the ifs fail.

i tried using the OR operator and it just broke everything. in my code, what's actually happening at if (apples) is it's checking today's date to see if it falls within a range of dates. it needs to do this for a whole bunch of different fruit based on a schedule that is pretty complicated, i.e. figuring out exactly which fruit are in the basket on a given day is harder than just running the schedule against these if 'rules'.

	var isSunday = new Date().getDay();
	var apples1Start = new Date(2018,8,4); // sept 4, 0 == jan.
	var apples1Stop = new Date(2018,8,23); // sept 22, stop dates need to be day after.
	var apples2Start = new Date(2018,10,5); // nov 5
	var apples2Stop = new Date(2018,10,25); // nov 24
	var apples3Start = new Date(2018,10,26); // nov 26
	var apples3Stop = new Date(2018,11,9); // dec 8
	var oranges1Start = new Date(2018,3,30); // april 30
	var oranges1Stop = new Date(2018,4,27); // may 26
	var oranges2Start = new Date(2018,9,22); // oct 22
	var oranges2Stop = new Date(2018,10,4); // nov 3
	var oranges3Start = new Date(2018,3,28); // april 28
	var oranges3Stop = new Date(2018,3,29); // april 28
	var bananas1Start = new Date(2018,0,1); // jan 1
	var bananas1Stop = new Date(2018,3,10); // april 9
	var bananas2Start = new Date(2018,6,2); // july 2
	var bananas2Stop = new Date(2019,3,11); // april 10
	var kiwi1Start = new Date(2018,9,13); // oct 13
	var kiwi1Stop = new Date(2018,10,25); // nov 24
	var papaya1Start = new Date(2018,8,29); // sept 29
	var papaya1Stop = new Date(2018,8,30); // sept 29
	var papaya2Start = new Date(2018,10,1); // nov 1
	var papaya2Stop = new Date(2018,10,4); // nov 3
	var papaya3Start = new Date(2018,9,15); // oct 15
	var papaya3Stop = new Date(2018,10,25); // nov 24
	var papaya4Start = new Date(2018,10,26); // nov 26
	var papaya4Stop = new Date(2018,11,9); // dec 8
	var papaya5Start = new Date(2018,11,10); // dec 10
	var papaya5Stop = new Date(2019,1,1); // dec 31
	var clemantines1Start = new Date(2018,0,1); // jan 1
	var clemantines1Stop = new Date(2018,2,1); // feb 28
	var clemantines2Start = new Date(2018,9,13); // oct 13
	var clemantines2Stop = new Date(2019,1,29); // feb 28
	var pears1Start = new Date(2018,8,10); // sept 10
	var pears1Stop = new Date(2019,0,3); // jan 2
	var tangerines1Start = new Date(2018,0,1); // jan 1
	var tangerines1Stop = new Date(2018,2,9); // mar 8
	var tangerines2Start = new Date(2018,11,20); // dec 20
	var tangerines2Stop = new Date(2019,2,9); // mar 8
	var starfruit1Start = new Date(2018,0,1); // jan 1
	var starfruit1Stop = new Date(2018,2,9); // mar 8
	var starfruit2Start = new Date(2018,9,13); // oct 12
	var starfruit2Stop = new Date(2019,2,9); // mar 8
	var lemons1Start = new Date(2018,0,1); // jan 1
	var lemons1Stop = new Date(2018,2,1); // feb 28
	var lemons2Start = new Date(2018,10,1); // nov 1
	var lemons2Stop = new Date(2019,2,1); // feb 28
	var apricots1Start = new Date(2018,0,1); // jan 1
	var apricots1Stop = new Date(2018,1,1); // jan 31
	var apricots2Start = new Date(2018,9,1); // oct 1
	var apricots2Stop = new Date(2019,1,1); // jan 31
	var tomatoes1Start = new Date(2018,0,1); // jan 1
	var tomatoes1Stop = new Date(2018,1,1); // jan 31
	var tomatoes2Start = new Date(2018,9,1); // oct 1
	var tomatoes2Stop = new Date(2019,1,1); // jan 31
	var today = new Date();

function yarp() {
	document.body.style.background = "green";
	document.getElementById("main").innerHTML = "you have fruit";
}

function narp() {
	document.body.style.background = "#ffffff";
	document.getElementById("main").innerHTML = "nothing";
}

	if (isSunday == 0) {
		document.body.style.background = "#ffffff";
		document.getElementById("main").innerHTML = "sunday";
		document.getElementById("fruit").innerHTML = "no fruit on a sunday.";
	}

	else {
		if (today >= apples1Start && today <= apples1Stop || today >= apples2Start && today <= apples2Stop || today >= apples3Start && today <= apples3Stop) {
			yarp();
			document.getElementById("fruit").innerHTML += "apples! ";
		}
		if (today >= oranges1Start && today <= oranges1Stop || today >= oranges2Start && today <= oranges2Stop || today >= oranges3Start && today <= oranges3Stop) {
			yarp();
			document.getElementById("fruit").innerHTML += "oranges. ";
		}
		if (today >= bananas1Start && today <= bananas1Stop || today >= bananas2Start && today <= bananas2Stop) {
			yarp();
			document.getElementById("fruit").innerHTML += "bananas. ";
		}
		if (today >= kiwi1Start && today <= kiwi1Stop) {
			yarp();
			document.getElementById("fruit").innerHTML += "kiwi. fancy! ";
		}
		if (today >= papaya1Start && today <= papaya1Stop || today >= papaya2Start && today <= papaya2Stop || today >= papaya3Start && today <= papaya3Stop || today >= papaya4Start && today <= papaya4Stop || today >= papaya5Start && today <= papaya5Stop) {
			yarp();
			document.getElementById("fruit").innerHTML += "papaya. ";
		}
		if (today >= clemantines1Start && today <= clemantines1Stop || today >= clemantines2Start && today <= clemantines2Stop) {
			yarp();
			document.getElementById("fruit").innerHTML += "clemantines. ";
		}
		if (today >= pears1Start && today <= pears1Stop) {
			yarp();
			document.getElementById("fruit").innerHTML += "pears. ";
		}
		if (today >= tangerines1Start && today <= tangerines1Stop || today >= tangerines2Start && today <= tangerines2Stop ) {
			yarp();
			document.getElementById("fruit").innerHTML += "tangerines. ";
		}
		if (today >= starfruit1Start && today <= starfruit1Stop || today >= starfruit2Start && today <= starfruit2Stop ) {
			yarp();
			document.getElementById("fruit").innerHTML += "star fruit. ";
		}
		if (today >= lemons1Start && today <= lemons1Stop || today >= lemons2Start && today <= lemons2Stop ) {
			yarp();
			document.getElementById("fruit").innerHTML += "lemons. ";
		}
		if (today >= apricots1Start && today <= apricots1Stop || today >= apricots2Start && today <= apricots2Stop ) {
			yarp();
			document.getElementById("fruit").innerHTML += "apricots. ";
		}
		if (today >= tomatoes1Start && today <= tomatoes1Stop || today >= tomatoes2Start && today <= tomatoes2Stop ) {
			yarp();
			document.getElementById("fruit").innerHTML += "tomatoes. ";
		}
		
		else {
			narp();
		}
	}
#horizon {
	position: absolute;
	top: 50%;
	width: 100%;
}

#content {
	position: absolute;
	top: -63px;
	text-align: center;
	width: 100%;
}

#main {
	line-height: 75px;
	font-size: 100px;
	margin: 0;
}
<div id="horizon">
	<div id="content">
		<h1 id="main"></h1>
		<p id="fruit"></p>
	</div>
</div>

回答1:


Separate the if statements so that the branches are not mutually exclusive and set up a "result" variable with a default value prior to testing.

Side Notes:

  • String.indexOf(str) is a way to check for a string's position within another string. It returns the index position that the search string was found at or -1 if the string wasn't found at all. It's a great way to test for the existence of a substring.
  • Only update the web page elements when absolutely necessary (i.e. setting .innerHTML) because it's an expensive operation. Instead, you can prepare what you want to write out in a string ahead of time and then, once the string is completely built, inject it into the page just once.
  • .innerHTML is used when the string you are getting/setting contains HTML that needs to be parsed as such. When your string doesn't contain any HTML, it's wasteful to use this because you are asking the HTML parser to look for and process HTML that it's not going to find. In these cases, use .textContent because it bypasses the HTML parser and is more efficient.

var out = document.getElementById("output");

function fruit(type){

  // Set type to an empty string if it is undefined
  type = type || "";

  // Set a default value first
  var result = "";

  if (type.indexOf("apples") > -1) {
    result = "apples";
  }

  if (type.indexOf("oranges") > -1) {
    result += " oranges";
  }

  if (type.indexOf("bananas") > -1) {
    result += " bananas";
  }
  
  // If the result is still an empty string, nothing correct was passed
  if(!result){
    result = "nothing";
  }
 
  // Now write out the final value of the variable
  // and only use .innerHTML when you are writing HTML,
  // otherwise, use .textContent
  out.textContent = result;
 
}

fruit();                  // My fruit basket has: nothing
fruit("apples");          // My fruit basket has: apples
fruit("oranges");         // My fruit basket has: oranges
fruit("bananas");         // My fruit basket has: bananas
fruit("apples oranges");  // My fruit basket has: apples oranges
fruit("apples bananas");  // My fruit basket has: apples bananas
<p id="fruit">My fruit basket has: <span id="output"></span></p>



回答2:


Use the negation operator to check the nothing case.

if (!(apples || oranges || bananas)) {
  document.getElementById("fruit").innerHTML = "nothing";
  return; // Assuming this code is inside of a function.
}

if (apples) {
  document.getElementById("fruit").innerHTML += "apples";
}

if (oranges) {
  document.getElementById("fruit").innerHTML += "oranges";
}

if (bananas) {
  document.getElementById("fruit").innerHTML += "bananas";
}



回答3:


There are multiple ways to do this. I'm partial to adding a variable to keep track of whether or not any of the ifs returned true:

var empty = true;
if(apples) {
    innerHTML += "apples";
    empty = false;
}
if(oranges) {
    innerHTML += "oranges";
    empty = false;
}
if(bananas) {
    innerHTML += "bananas";
    empty = false;
}
if(empty) {
    innerHTML += "nothing";
}

Alternatively, you could figure out if its empty based on the length of the added string:

var str = "";
if(apples) {
    str += "apples";
}
if(oranges) {
    str += "oranges";
}
if(bananas) {
    str += "bananas";
}
if(str.length == 0) {
    str = "nothing";
}

innerHTML += str;



回答4:


You can just combine these statements using the or || separator and catch every other case:

Syntax: if (apples || oranges || bananas) {} if apples or oranges or bananas

Syntax: if (apples && oranges && bananas) {} if apples and oranges and bananas

Syntax: if ( (apples && oranges) || bananas) {} if apples and oranges or just bananas

var apples = false, oranges = false, bananas = false

var count=0 // just for displaying different fruits
function switchFruit() {
 
  if (count == 1) {apples=true; oranges=false, bananas=false, button.value="apple"}
  if (count == 2) {apples=false; oranges=true, bananas=false, button.value="oranges"}
  if (count == 3) {apples=false; oranges=false, bananas=true, button.value="bananas"; count=0}
  
  count++;
  
  if (apples || oranges || bananas) { // if apples or oranges or bananas
    if (apples) {
      document.getElementById("fruit").innerHTML += "apples ";
    }
    if (oranges) {
      document.getElementById("fruit").innerHTML += "oranges ";
    }
    if (bananas) {
      document.getElementById("fruit").innerHTML += "bananas ";
    }
  } else { // if not one of "apples, oranges, bananas"
    document.getElementById("fruit").innerHTML += "nothing ";
  }
}
<input type="button" id="button" onclick="switchFruit()" value="nothing">

<p id="fruit"></p>

Have a look at logical operators in the docs



来源：https://stackoverflow.com/questions/49183317/javascript-evaluating-multiple-if-statements-without-also-running-else

标签
javascript
if-statement
conditional
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!