🔧 Find Array Element in the Array using JavaScript
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to
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:
🔧 How to Find the Largest Element in an Array
📈 29.26 Punkte
🔧 Programmierung
🐧 filter vs. find: JavaScript Array Methods
📈 23.6 Punkte
🐧 Linux Tipps