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:
