將輸入與數組的值進行比較僅適用於單個值

Question

我有一些水果名稱存儲在數組中。如果用戶輸入已存儲在陣列中的食物名稱，則應返回true，否則返回false。

但是，當我輸入值Mango時，它只返回true，否則總是返回false，爲什麼？

這裏是我的代碼：

JSfiddle link

HTML：

<input type="text" id="value" /> 
<button onclick="check()">test</button> 
<p id="pValue"> 
</p> 

的JavaScript：

var myVar; 

check = function() { 
    myVar = document.getElementById("value").value; 

    var fruits = ['Banana', 'Orange', 'Apple', 'Mango']; 

    for(i = 0; i < fruits.length; i++) { 
     if(myVar == fruits[i]) { 
      document.getElementById("pValue").innerHTML = "true"; 
     } 
     else { 
      document.getElementById("pValue").innerHTML = "false"; 
     } 
    } 
} 

Answer 1

這是因爲您使用的是用於增加循環，這樣只有最後一個值將返回true。如果您選擇保留此方法，則可以將break;添加到循環中。請參見下面更新小提琴::

var myVar; 
 

 

 
check = function() { 
 
    myVar = document.getElementById("value").value; 
 
    var fruits = ['Banana', 'Orange', 'Apple', 'Mango']; 
 

 
    for (i = 0; i < fruits.length; i++) { 
 
     if (myVar == fruits[i]) { 
 
      document.getElementById("pValue").innerHTML = "true"; 
 
      break; 
 
     } else { 
 
      document.getElementById("pValue").innerHTML = "false"; 
 
     } 
 
    } 
 
}

<input type="text" id="value" /> 
 
<button onclick="check()">test</button> 
 
<p id="pValue"> 
 
</p>