Demo of Adding elements by user and displaying


Enter one sample data here and press Add button. Next add one more sample data and press Add button. ....

Users can add elements through an existing textbox and the status of the array is displayed below the text box with all elements. One by one elements are added by using push function. We have used getElementById to read the data from the text box similarly used on div tag to display all the elements of the array.

Array length property to get number of elements present inside array

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>
Output is here
key : key1 =>value: value1
key : key2 =>value: value2

Deleting 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


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com







    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

    Post your comments , suggestion , error , requirements etc here




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer