CODEWITHSUNDEEP
javascriptarrayshtml-input
Yasin Faruk
Yasin Faruk

Reputation: 23

Matching input from a text field against elements of an array

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Data search</title>
   </head>
   <body>
      <input type="text" name="" id="inputData" value="" placeholder="">
      <button type="button" onclick="myFunction()">search</button>
      <p id="text"></p>
      <script type="text/javascript">
         function myFunction(){
          var data = [1, 2, 3, 4, 5, "name", "email", "id", "password", "position"];
          var iData = document.getElementById("inputData").value;
         
          for(var i = 0; i <= data.length; i++){
             
              if(iData == data){
         
                  document.getElementById("text").innerHTML = "This data is available in array data";
              }else{
         
                   document.getElementById("text").innerHTML = "This data is not available in array data";
              }
          }
         }
      </script>
   </body>
</html>

I created an array which contains some data. I take input from a text field and search the input against the data in the array. If the inputted data matches an element in the array, I want to show a notification such as:

"This data is available in array data"

If the input doesn't match any elements in the array, instead I want it to output:

"this data is not available in array data".

But it is not working. I am failing to find out the problem, and I am also uncertain whether this is the right way to get my expected result.

Upvotes: 2

Views: 1964

Answers (1)

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20399

There are two errors in your code - first, when you find the data in the array, you need to immediately return. Otherwise your function will keep looping through elements and overwrite the positive output again with "This data is not available in array data".

Secondly, in your comparison you need to use data[i] instead of data, because you want to test against each element in the array, rather than the entire array itself.

Here is a live, working example:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Data search</title>
   </head>
   <body>
      <input type="text" name="" id="inputData" value="" placeholder="">
      <button type="button" onclick="myFunction()">search</button>
      <p id="text"></p>
      <script type="text/javascript">
         function myFunction(){
          var data = [1, 2, 3, 4, 5, "name", "email", "id", "password", "position"];
          var iData = document.getElementById("inputData").value;
         
          for(var i = 0; i <= data.length; i++){
             
              if(iData == data[i]){
         
                  document.getElementById("text").innerHTML = "This data is available in array data";
                  return;
              }else{
         
                   document.getElementById("text").innerHTML = "This data is not available in array data";
              }
          }
         }
      </script>
   </body>
</html>

Upvotes: 1

Related Questions