CODEWITHSUNDEEP
javascriptarrayssearch
Karl
Karl

Reputation: 83

Search array using user input

I want to be able to search an array with the input a user has entered. So for example if the user enters "18" into the input field, either "value not found" would appear or "value found" would appear depending on whether the number 18 was in the array.

This is what I have so far.

var search = document.getElementById("search");
var arr = [18,23,20,17,21,18,22,19,18,20];

function beginhere() {
   var input = document.getElementById("Input").value;

   for (i=0; i<arr.length; i++){
      if (arr[i] == Input) {
         alert(arr[i]);
      } else {
         alert("Value not found");
      }
   }
};

Upvotes: 2

Views: 7974

Answers (3)

Nina Scholz
Nina Scholz

Reputation: 386680

You have some issues:

  • Move search declaration and initialization inside of the function, because you need the actual value and not the value at start.

  • Convert the search value to a number by adding a plus infront of the value. This uses an unary plus + for converting a value (string or number) to a number.

  • Test with search.

  • Exit function if search is found.

  • Display only one message, if not found after the loop.

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

function beginhere() {
    var search = +document.getElementById("search").value, // need to covert to integer
        i; // declaration missing

    for (i = 0; i < arr.length; i++) {
        if (arr[i] == search) { // use search variable
            alert(arr[i]);
            return;
        }
    }
    alert("Value not found");
}
<input id="search" type="text" onchange="beginhere()">

Upvotes: 0

kind user
kind user

Reputation: 41893

I've refactored your if conditions, because as for now it alerts result with every cycle of the for loop. If the loop has found the given number inside the array, log the number and return the function (there's no need to keep the loop alive anymore). If not - log that value wasn't found to the console.

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

function beginhere() {
  var input = document.getElementById("Input").value;
  for (i = 0; i < arr.length; i++) {
    if (arr[i] == input) {
      console.log(arr[i]);
      return;
    }
  }
  console.log('value not found');
};
<button onclick="beginhere()">click</button>
<input id='Input'>

Another possible solution, using Array#find.

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

function beginhere() {
  var input = document.getElementById("Input").value,
      res = arr.find(v => v == input);
      console.log(res ? res : "wasn't found");
};
<button onclick="beginhere()">click</button>
<input id='Input'>

Upvotes: 1

Suresh Atta
Suresh Atta

Reputation: 122008

Your mistake is the case sensitive i in Input

 if (arr[i] == Input) {

should be 

 if (arr[i] == input) {

And then you really don't need the else part. Just write the not found alert after the loop and write a return statement inside the if.

function beginhere() {
   var input = document.getElementById("Input").value;

   for (i=0; i<arr.length; i++){
      if (arr[i] == input) {
         alert(arr[i]); 
         return;
      }
   }
   alert("Value not found");
};

And without a loop you can try 

function beginhere() {
   var input = document.getElementById("Input").value;

     if(arr.indexOf(parseInt(input)) != -1) {
          alert(input); 
          return;
      }
   alert("Value not found");
};

Upvotes: 1

Related Questions