Demo of Adding elements by user and displaying
Array length property to get number of elements present inside array
Here is the demo
Enter one sample data here and press Add button. Next add one more sample data and press Add button. ....Here is the code
<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>Demo of adding element to an array</title>
</head>
<body>
<script type="text/javascript">
var data = new Array(); // creating array
function add_element(){
data.push(document.getElementById('t1').value); // adding element to array
document.getElementById('t1').value=''; // Making the text box blank
disp(); // displaying the array elements
}
function disp(){
var str='';
str = 'total number of elements in data array : ' + data.length + '<br>';
for (i=0;i<data.length;i++)
{
str += i + ':'+data[i] + "<br >"; // adding each element with key number to variable
}
document.getElementById('disp').innerHTML=str; // Display the elements of the array
}
</script>
<input type=text id='t1'><input type=button value='Add' onClick='add_element()';>
<div id=disp></div>
</body>
</html>Adding key value pair to Array
<script>
var my_ans = new Array(); // declaring array
my_ans['key1']='value1';
my_ans['key2']='value2';
// displaying the array data //
for (var key in my_ans) {
document.write("key :" +key + "=>value: "+ my_ans[key]+ "<br>");
}
</script>key : key1 =>value: value1
key : key2 =>value: value2Deleting elements by user
Here we are only adding the elements to the array, by adding another function we can give facility to user to remove any elements from the array.DEMO to Add and Remove elements by user using Splice Push to add elements to an Array
Array Reference How to display elements of an Array
Subscribe to our YouTube Channel here
This article is written by plus2net.com team.
More on JavaScript Arrays : Create , display and Applications
JavaScript Array Displaying elements of an array by looping through join():Displaying elements of an array using join() function sort():Sorting of elements of an array using function length:Length property to get the total number of elements in an array reverse():Reversing the elements of an array pop():Removeing last element of an array by using pop() shift():Removeing first element of an array using shift() Removeing all element of an array push():Adding elements to array using push() unshift():Adding elements to array using unshift() splice():Add replace remove elements from an array using splice() split():Creating array by splitting string variable toString: To join all elements and create a string concat: To join two or more arrays to a single array slice: To return element from an array with starting and ending positions Two Dimensional Array: Adding and displaying elements searching for matching element inside an array by using indexOf function All elements of the array separated by comma| anjel | 07-03-2015 |
| hi.. useful code.but i have a doubt what if i want to display particular element of any index and that index value is to be taken by entering values though users. | |
| smo | 13-03-2015 |
| You can display the value by reading the key of the array. In side the function you can see one for loop is used with variable i, if i value is taken from user then the corresponding value can be displayed. | |
| Himari Biswas | 20-01-2016 |
| thank u very much finally my problem solved | |
| mr red | 21-02-2017 |
| how about, if the data in the arrays are on the table? what will the code format is? | |
| smo1234 | 23-02-2017 |
| You have to first collect the data from the table by using any server side script and SQL. While displaying the data you can use the array push to insert data to the JavaScript array. Note that while using server side script you have to echo or print the client side JavaScript code to store values inside array. | |
17-04-2021 | |
| Thank you so much. This will help me | |