JavaScript: Add items in a blank array and display the items
JavaScript Array: Exercise-13 with Solution
Write a JavaScript program to add items to a blank array and display them.
Sample Screen:
Sample Solution:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
body {padding-top:50px}
</style>
</head>
<body>
<input type="text" id="text1"></input>
<input type="button" id="button1" value="Add" onclick="add_element_to_array();"></input>
<input type="button" id="button2" value="Display" onclick="display_array();"></input>
<div id="Result"></div>
</body>
</html>
JavaScript Code:
// Initialize a variable 'x' with 0
var x = 0;
// Initialize an empty array
var array = Array();
// Function to add an element to the array
function add_element_to_array() {
// Get the value from the input with id "text1" and assign it to the array at index 'x'
array[x] = document.getElementById("text1").value;
// Display an alert indicating the added element and its index
alert("Element: " + array[x] + " Added at index " + x);
// Increment the index variable 'x'
x++;
// Clear the value of the input with id "text1"
document.getElementById("text1").value = "";
}
// Function to display the elements of the array
function display_array() {
var e = "<hr/>"; // Initialize a string with a horizontal line
// Iterate through the array and create a string representation of each element
for (var y = 0; y < array.length; y++) {
e += "Element " + y + " = " + array[y] + "<br/>";
}
// Set the innerHTML of the element with id "Result" to the generated string
document.getElementById("Result").innerHTML = e;
}
Flowchart:
ES6 Version:
// Initialize a variable 'x' with 0
let x = 0;
// Initialize an empty array
const array = [];
// Function to add an element to the array
const add_element_to_array = () => {
// Get the value from the input with id "text1" and assign it to the array at index 'x'
array[x] = document.getElementById("text1").value;
// Display an alert indicating the added element and its index
alert(`Element: ${array[x]} Added at index ${x}`);
// Increment the index variable 'x'
x++;
// Clear the value of the input with id "text1"
document.getElementById("text1").value = "";
};
// Function to display the elements of the array
const display_array = () => {
let e = "
"; // Initialize a string with a horizontal line
// Iterate through the array and create a string representation of each element
array.forEach((element, y) => {
e += `Element ${y} = ${element}
`;
});
// Set the innerHTML of the element with id "Result" to the generated string
document.getElementById("Result").innerHTML = e;
};
Live Demo:
See the Pen JavaScript: Add items in a blank array and display the items - array-ex-13 by w3resource (@w3resource) on CodePen.
Improve this sample solution and post your code through Disqus.
Previous: Write a JavaScript program to compute the sum and product of an array of integers.
Next: Write a JavaScript program to remove duplicate items from an array (ignore case sensitivity).
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.
https://www.w3resource.com/javascript-exercises/javascript-array-exercise-13.php
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics