javascript：在没有 运行 else 的情况下评估多个 if 语句
javascript: evaluating multiple if statements without also running else
我正在尝试用多个 if 语句拼凑一个简单的 javascript 页面。这个想法是根据对一堆 if 语句的评估附加到列表。问题是如果其中任何一个失败，它会触发 else 语句。我只希望它在所有这些都失败的情况下触发其他。
<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";
}
当我 运行 这个和所有条件都满足时，我会得到：
My fruit basket has: apples oranges bananas
当我运行这个并且没有满足任何条件时，我会得到：
My fruit basket has: nothing
但如果有任何一个条件不满足，我会得到：
My fruit basket has: apples nothing
或
My fruit basket has: apples bananas nothing
我试过使用 if else，但在第一个 'match' 后就退出了。所以在上面的例子中，如果我有 both 苹果和香蕉，使用 if else 将 return
My fruit basket has: apples
别告诉我我也有香蕉
问题：我该怎么做才能使else语句仅在所有if语句都失败的情况下运行？
编辑
我尽量让它变得简单，但我似乎过度简化了它。
在所有 if 语句都已 运行 之前，其他什么都不知道。这就是它的条件：如果所有 ifs 都失败。
我尝试使用 OR 运算符，但它破坏了一切。在我的代码中，if (apples) 处实际发生的是检查今天的日期以查看它是否在日期范围内。它需要根据一个非常复杂的时间表对一大堆不同的水果执行此操作，即准确地弄清楚特定日期篮子里有哪些水果比仅 运行 根据这些时间表更难'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>
您可以使用 或 || 分隔符 组合这些语句并捕捉所有其他情况：
语法: if (apples || oranges || bananas) {} if apples or oranges or 香蕉
语法: if (apples && oranges && bananas) {} if apples and oranges and 香蕉
语法: if ( (apples && oranges) || bananas) {} if apples and oranges or just 香蕉
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>
查看 docs
中的逻辑运算符
有多种方法可以做到这一点。我倾向于添加一个变量来跟踪是否有任何 ifs 返回 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";
}
或者，您可以根据添加的字符串的长度判断它是否为空：
var str = "";
if(apples) {
str += "apples";
}
if(oranges) {
str += "oranges";
}
if(bananas) {
str += "bananas";
}
if(str.length == 0) {
str = "nothing";
}
innerHTML += str;
使用否定运算符检查 nothing 情况。
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";
}
将 if 语句分开，使分支不相互排斥，并在测试前设置一个具有默认值的 "result" 变量。
旁注：
String.indexOf(str) 是一种检查字符串位置的方法
在另一个字符串中。 returns 搜索的索引位置
string was found at or -1 如果根本找不到字符串。它是
测试子字符串是否存在的好方法。- 仅在绝对必要时才更新网页元素（即
设置
.innerHTML) 因为这是一项昂贵的操作。反而，
你可以提前准备好你想写的字符串
然后，一旦字符串完全构建，将其注入
只翻一页。
.innerHTML用于当你是getting/setting的字符串包含
HTML 需要这样解析。当你的字符串不
包含任何 HTML，使用它很浪费，因为你在问
HTML 解析器寻找并处理 HTML 它不会
寻找。在这些情况下，使用 .textContent 因为它绕过了 HTML
解析器，效率更高。
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>
我正在尝试用多个 if 语句拼凑一个简单的 javascript 页面。这个想法是根据对一堆 if 语句的评估附加到列表。问题是如果其中任何一个失败，它会触发 else 语句。我只希望它在所有这些都失败的情况下触发其他。
<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";
}
当我 运行 这个和所有条件都满足时，我会得到：
My fruit basket has: apples oranges bananas
当我运行这个并且没有满足任何条件时，我会得到：
My fruit basket has: nothing
但如果有任何一个条件不满足，我会得到：
My fruit basket has: apples nothing
或
My fruit basket has: apples bananas nothing
我试过使用 if else，但在第一个 'match' 后就退出了。所以在上面的例子中，如果我有 both 苹果和香蕉，使用 if else 将 return
My fruit basket has: apples
别告诉我我也有香蕉
问题：我该怎么做才能使else语句仅在所有if语句都失败的情况下运行？
编辑 我尽量让它变得简单，但我似乎过度简化了它。
在所有 if 语句都已 运行 之前，其他什么都不知道。这就是它的条件：如果所有 ifs 都失败。
我尝试使用 OR 运算符，但它破坏了一切。在我的代码中，if (apples) 处实际发生的是检查今天的日期以查看它是否在日期范围内。它需要根据一个非常复杂的时间表对一大堆不同的水果执行此操作，即准确地弄清楚特定日期篮子里有哪些水果比仅 运行 根据这些时间表更难'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>
您可以使用 或 || 分隔符 组合这些语句并捕捉所有其他情况：
语法: if (apples || oranges || bananas) {} if apples or oranges or 香蕉
语法: if (apples && oranges && bananas) {} if apples and oranges and 香蕉
语法: if ( (apples && oranges) || bananas) {} if apples and oranges or just 香蕉
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>
查看 docs
中的逻辑运算符有多种方法可以做到这一点。我倾向于添加一个变量来跟踪是否有任何 ifs 返回 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";
}
或者，您可以根据添加的字符串的长度判断它是否为空：
var str = "";
if(apples) {
str += "apples";
}
if(oranges) {
str += "oranges";
}
if(bananas) {
str += "bananas";
}
if(str.length == 0) {
str = "nothing";
}
innerHTML += str;
使用否定运算符检查 nothing 情况。
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";
}
将 if 语句分开，使分支不相互排斥，并在测试前设置一个具有默认值的 "result" 变量。
旁注：
String.indexOf(str)是一种检查字符串位置的方法 在另一个字符串中。 returns 搜索的索引位置 string was found at or-1如果根本找不到字符串。它是 测试子字符串是否存在的好方法。- 仅在绝对必要时才更新网页元素（即
设置
.innerHTML) 因为这是一项昂贵的操作。反而， 你可以提前准备好你想写的字符串 然后，一旦字符串完全构建，将其注入 只翻一页。 .innerHTML用于当你是getting/setting的字符串包含 HTML 需要这样解析。当你的字符串不 包含任何 HTML，使用它很浪费，因为你在问 HTML 解析器寻找并处理 HTML 它不会 寻找。在这些情况下，使用.textContent因为它绕过了 HTML 解析器，效率更高。
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>