JavaScript array functions sort

We try to explain you a example that makes easy to understand the concept of JavaScript array function sort.

We try to explain you a example that makes easy to understand the concept of JavaScript array function sort. The code create a HTML Page specifying Name, text field and button 'Insert and sort'. The variable array instantiate an array object .On click the button, function push( ) and show ( ) is invoked. The function push ( ) evaluate the condition, if the value entered in a text field is null, an alert message box is displayed with 'Name is empty'. Otherwise the value entered by the user is assigned to array. The function show( ) include array. sort( ) method.

array. sort ( ) - The sort( ) is used to sort the element in an array. This method sort the element by alphabetically.

The sorted array assigned to a string variable. The for loop run and execute the script till the length of i is less than the count. The concatenated string and array are assigned in variable string .

Finally if the array length is greater than 0,The code displays you the sorted element stored from a string in your supporting browsers.

document.getElementById('myDiv').innerHTML - This return you element of an array on the basis of the respective Id.

JavaScript array functions sort.html

<html>
  <head>
  <title>push function</title>
  <script>

  var array = new Array();
  var count = 0;

  function push(val){
  if(val=="")
  alert("Name is empty")
  else {
  array[count]=val;
  count++;
  }
  }

  function show() {

  array.sort();
  var string="<b>Sorted Array:</b><br>";
  for(i = 0; i < count; i++) {
  string =string+array[i]+"<br>";
  }
  if(array.length > 0)
  document.getElementById('myDiv').innerHTML = string;
  }
  </script>

  </head>

  <body>
  <h2>JavaScript Sort</h2>
  <form name="form1">
  <table width="407">
  <tr>
  <td width="154" align="right"><b>Name</b></td>
  <td width="9"><b> :</b></td>
  <td width="224">
  <input type="text" name="name"/></td>
  </tr>
  <tr>
  <td width="154" align="right"> </td>
  <td width="9"> </td>
  <td width="224"> </td>
  </tr>
  <tr>
  <td width="154" align="right"> </td>
  <td width="9"> </td>
  <td width="224">
  <input type="button" Value="Insert And Sort"
   onclick="push(this.form.name.value),show();"/>

  </td>
  </tr>
  </table>
  </form>
  <div id="myDiv"></div>
  </body>
</html>

Output

After insert value:

Download Code

JavaScript array functions sort

JavaScript array functions sort

JavaScript array functions sort

Tutorials