JavaScript Array from Input

In this Tutorial we want to describe you a code that makes you easy to understand an example of Array from Input. The example create a HTML Page JavaScript array from input include a text name 'name', a text field and a button name inset into array. On click a button, a show( ) and insert ( ) function is invoked. The array variable instantiate an array object and hold its values in an array. The function insert ( )accept the value entered by the user. The function show ( ) includes string variable that hold all the element of the array. The for loop run and execute the script till the length i is less than array length. The variable string store the concatenated value of string and array.

The if operator return you the all the element of string in case the array length is more than zero.

JavaScript Array from Input.html


<html>

    <head>

        <title> JavaScript Array from Input</title>

        <script>



            var array = new Array();



            function insert(val){

                array[array.length]=val;

            }



            function show() {

                var string="<b>All Element of the Array :</b><br>";

                for(i = 0; i < array.length; i++) {

                    string =string+array[i]+"<br>";

                }

                if(array.length > 0)

                 document.getElementById('myDiv').innerHTML = string;

            }

        </script>

        

    </head>

    

    <body>

        <h2>JavaScript Array from Input</h2>

        <form name="form1">

            <table width="407">

                <tr>

                    <td width="154" align="right"><b>Name</b>

                    <td width="9"><b>&nbsp;:</b>

                    <td width="224">

                    <input type="text" name="name"/>

                </tr>

                <tr>

                    <td width="154" align="right">

                    <td width="9">

                    <td width="224">

                </tr>

                <tr>

                    <td width="154" align="right">

                    <td width="9">

                    <td width="224">

                    <input type="button" Value="Add Into Array" 

                     onclick="insert(this.form.name.value),show();"/>

                </tr>

            </table>

        </form>

        <div id="myDiv"></div>

    </body>

</html>

Output

After insert value

Download Code