Find Array Element in the Array using JavaScript

#javascript #webdev #programming #learning

The function Find searches for a specific number (NewVal)in a predefined array (data). If the number is found, it logs a message indicating its availability; otherwise, it indicates the number is not available.

Simple Example:

    function Find(NewVal) {
        let data = [
          1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 15, 16, 20, 35, 88, 90, 45, 69, 18,
          55, 100,
        ];

        // console.log(data);

        let i = 0;
        let Find = false;
        while (i < data.length) {
          // it is a testing array element print or not
          // console.log(data[i]);
          if (data[i] == NewVal) {
            Find = true;
            break;
          }
          i++;
        }

        if (Find) {
          console.log(`${NewVal} Variable is Available ..! `);
        } else {
          `${NewVal} Variable is not Available ..! `;
        }
      }

      Find(10);

Output:

10 Variable is Available ..!

Simple Example using DOM:

This program allows users to check whether a specific element exists in a predefined array. The user enters a value into an input field and clicks a button to initiate the search. The result is then displayed on the webpage, indicating whether the entered value is present in the array.

HTML Structure:

Container: A flex container centered on the page.
Input Field: Where users can enter the number they want to search for.
Button: Triggers the search function when clicked.
Result Display: Shows whether the entered number is available in the array.

CSS Styles:

Center the container and style the input field and button for a visually appealing interface.

JavaScript Functionality:

Data Array: Predefined array of numbers.
Display Array: Shows the array on the webpage.
Search Function: Searches for the user-input number in the array and displays the result

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Find Element From the array..!</title>

    <style>
      .container {
        display: flex;
        justify-content: center;
        margin-top: 100px;
        font-size: 20px;
      }
      input {
        padding: 10px;
        width: 400px;
      }
      button {
        padding: 10px;
        background-color: blueviolet;
        border-color: blueviolet;
        color: white;
        cursor: pointer;
        font-size: 15px;
        font-family: Arial, Helvetica, sans-serif;
      }
      button:hover {
        background-color: rgb(110, 12, 202);
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div>
        <h2>Find Element in Array..!</h2>

        <h3 id="NumData"></h3>
        <input type="text" id="Num" />

        <button onclick=" Find()">Find Element</button>
        <hr />
        <h3 id="Ans"></h3>
      </div>
    </div>

    <script>
      let Data = [
        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 15, 16, 20, 35, 88, 90, 45, 69, 18,
        55, 100,
      ];
      document.getElementById(
        "NumData"
      ).innerHTML += `Our Array is: <br> ${Data}`;

      function Find(NewVal) {
        let NewValue = document.getElementById("Num").value;

        let i = 0;
        let Find = false;
        while (i < Data.length) {
          // it is a testing array element print or not
          // console.log(data[i]);

          if (Data[i] == NewValue) {
            Find = true;
            break;
          }

          i++;
        }

        if (Find) {
          document.getElementById(
            "Ans"
          ).innerHTML = `${NewValue} is available in the array.`;
        } else {
          document.getElementById(
            "Ans"
          ).innerHTML = `${NewValue} is not available in the array.`;
        }
      }
    </script>
  </body>
</html>

Output: