检查 JavaScript 数组中是否存在数字输入值

Question

I am trying to check if a number entered exists in an array. I've tried many things and haven't got anything to work.

function start() {
    var arrNum = [18, 23, 20, 17, 21, 18, 22, 19, 18, 20];
    var input = document.getElementById('input').value;
    var numberExist = document.getElementById('numberExist').innerHTML;

    for (var i = 0; i < arrNum.length; i++) {
        if (input === arrNum[i]) {
            alert('input');
            numberExist = ('The number ' + input + 'exists in the array');
        } else {
            numberExist = ('The number ' + input + 'does not exist in the array');
        }
    }

    var arrNum = arrNum.join(' ');
    document.getElementById('listOfvalues').innerHTML = ('The values in the array are ' + arrNum);
}

Answer 1

Here are a few pointers:

• You need to cast your input.value to an integer, eg using the unary + operator, because the HTMLInputElement#value property returns a string.
• Your else block will run on the first for-loop iteration unless you move it outside of the loop body.

 function start() { var arrNum = [18, 23, 20, 17, 21, 18, 22, 19, 18, 20] var input = +document.getElementById('input').value var numberExist for (var i = 0; i < arrNum.length; i++) { if (input === arrNum[i]) { numberExist = 'The number ' + input + ' exists in the array' } } if (!numberExist) { numberExist = 'The number ' + input + ' does not exist in the array' } document.getElementById('listOfvalues').textContent = 'The values in the array are ' + arrNum.join(' ') document.getElementById('numberExist').textContent = numberExist } start()

 <input type="number" id="input" value="18"> <div id="listOfvalues"></div> <div id="numberExist"></div>

Of course, as others have pointed out, this example can be greatly simplified using the Array#indexOf method:

 function start() { var array = [18, 23, 20, 17, 21, 18, 22, 19, 18, 20] var input = +document.getElementById('input').value var numberExist = array.indexOf(input) < 0 ? 'The number ' + input + ' does not exist in the array' : 'The number ' + input + ' exists in the array' document.getElementById('listOfvalues').textContent = 'The values in the array are ' + array.join(' ') document.getElementById('numberExist').textContent = numberExist } start()

 <input type="number" id="input" value="18"> <div id="listOfvalues"></div> <div id="numberExist"></div>

Answer 2

Try indexOf function Eg:

arr = [1, 4, 18, 5, 10];
arr.indexOf(4); //returns 4
arr.indexOf(20); //returns -1

Answer 3

Use indexOf method

var arrNum = [18, 23, 20, 17, 21, 18, 22, 19, 18, 20];

function checkNumber(x){
 if(arrNum.indexOf(x)!=-1){
    alert('number exist')
 }
 else{
 alert('dont exist')
 }

}
checkNumber(8) // alert don't exist

Answer 4

Array prototype has a method indexOf which returns the index of the element, if such exists, -1 otherwise.

In ES6 includes method is added, which returns true/false depending on element's existence.

Answer 5

Try this:

 function checkIfExists(arr, num){ for (var i = 0; i < arr.length; i +=1){ if(num === arr[i]){ return true; } } return false; } var arrNum = [18, 23, 20, 17, 21, 18, 22, 19, 18, 20]; var userInput = document.getElementById('user-input'); arrNumStr = arrNum.join(","); document.getElementById('listOfvalues').innerHTML = ('The values in the array are ' + arrNumStr); document.getElementById('check').onclick = function () { var input = Number(userInput.value); // Using Number to convert from string to number //if (arrNum.indexOf(input) > -1) if (checkIfExists(arrNum,input)){ alert('Number is exists') }else{ alert('Number not exists'); } }

 <input type="text" id="user-input"> <br> <input type="button" id="check" value="Check"> <br> <div id="listOfvalues" ></div>

Answer 6

convert input value to number which is by default string.

var input = +document.getElementById('input').value;
//OR input = Number(document.getElementById('input').value);
//OR input = parseInt(document.getElementById('input').value, 10);

break the loop if number is found, do not continue running the loop.

if (input === arrNum[i]) {
        numberExist.innerHTML = ('The number ' + input + ' exists in the array');
        break;
    }

 window.onload = start; function start() { var arrNum = [18, 23, 20, 17, 21, 18, 22, 19, 18, 20]; var input = +document.getElementById('input').value; var numberExist = document.getElementById('numberExist'); for (var i = 0; i < arrNum.length; i++) { if (input === arrNum[i]) { numberExist.innerHTML = ('The number ' + input + ' exists in the array'); break; } else { numberExist.innerHTML = ('The number ' + input + ' does not exist in the array'); } } var arrNum = arrNum.join(' '); document.getElementById('listOfValues').innerHTML = ('The values in the array are ' + arrNum); }

 <input type="number" id="input" value="18" onblur="start()"/> <button onclick="start()">Check</button> <div id="numberExist"></div> <div id="listOfValues"></div>

Answer 7

Strict equality operator compares types: Which equals operator (== vs ===) should be used in JavaScript comparisons? .

 console.log("1 == 1 is", 1 == 1); console.log("1 == \\"1\\" is", 1 == "1"); console.log("1 === 1 is", 1 === 1); console.log("1 === \\"1\\" is", 1 === "1"); console.log("1 === parseInt(\\"1\\", 10) is", 1 === parseInt("1", 10));

Answer 8

This can now be done with the 'includes' method (not in Edge 13 or earlier).

if( arr.includes(valueToFind) ){

w3schools

Answer 9

Try to use Number() function. Such as Number(input) . Since you input box type is not Number . Thus in input variable you are always getting string. Thus you need to convert the string to numeric.