List Manipulator in Javascript

Submitted by Yorkiebar on Friday, April 18, 2014 - 21:22.
Introduction: This tutorial is on how to create a simple array re-orderer in Javascript. HTML: We are going to have a few HTML elements, here are the details... Textarea, named area, to contain the original list. Button, to reverse the list. Button, to sort the list a-z. Button, to sort the list z-a. Button, to randomise the list.
  2.         <head>
  3.  
  4.         </head>
  5.         <body>
  6.                 <textarea cols='20' rows='40' id='area'></textarea>
  7.                 <button onclick='reverseList();'>Reverse</button>
  8.                 <button onclick='sortList();'>Sort A-Z</button>
  9.                 <button onclick='sortReverse();'>Sort Z-A</button>
  10.                 <button onclick='randomise();'>Randomise</button>
  11.         </body>
  12. </html>
Reverse: As you can see from the HTML buttons, the reverseList button runs the javascript function 'reverseList' when it is clicked ('onclicked')...
  1. <script>
  2.         function reverseList()
  3.         {
  4.                 var lines = document.getElementById("area").value.split('\n'); //Get all lines from 'area'.
  5.                 lines = lines.reverse();
  6.                 document.getElementById('area').value = '';
  7.                 for (var i=0;i<lines.length;i++) {
  8.                         var line = lines[i];
  9.                         document.getElementById('area').value += line + '\n';
  10.                 }
  11.         }
  12. </script>
We simply get all the lines from the textarea 'area' and put them in to a new variable/array 'lines'. We then reverse the array, reset the textareas value to nothing and then add each line in 'lines' to the 'area' textarea. Sort A-Z: For sort a-z we do a similar thing to 'reverseList' except instead of using 'reverse', we use 'sort'...
  1. function sortList()
  2. {
  3.         var lines = document.getElementById("area").value.split('\n'); //Get all lines from 'area'.
  4.         lines = lines.sort();
  5.         document.getElementById('area').value = '';
  6.         for (var i=0;i<lines.length;i++) {
  7.                 var line = lines[i];
  8.                 document.getElementById('area').value += line + '\n';
  9.         }
  10. }
Sort Z-A: Now we are able to combine the previous two examples, reverse and sort a-z, to perform a z-a sort. First we sort the list of lines named 'lines' to a-z format. Then we reverse it to get a z-a format...
  1. function sortReverse() {
  2.         var lines = document.getElementById("area").value.split('\n'); //Get all lines from 'area'.
  3.         lines = lines.sort();
  4.         lines = lines.reverse();
  5.         document.getElementById('area').value = '';
  6.         for (var i=0;i<lines.length;i++) {
  7.                 var line = lines[i];
  8.                 document.getElementById('area').value += line + '\n';
  9.         }
  10. }
Finished! Here is the full souce...
  1. <html>
  2.         <head>
  3.                 <script>
  4.                         function reverseList()
  5.                         {
  6.                                 var lines = document.getElementById("area").value.split('\n'); //Get all lines from 'area'.
  7.                                 lines = lines.reverse();
  8.                                 document.getElementById('area').value = '';
  9.                                 for (var i=0;i<lines.length;i++) {
  10.                                         var line = lines[i];
  11.                                         document.getElementById('area').value += line + '\n';
  12.                                 }
  13.                         }
  14.  
  15.                         function sortList()
  16.                         {
  17.                                 var lines = document.getElementById("area").value.split('\n'); //Get all lines from 'area'.
  18.                                 lines = lines.sort();
  19.                                 document.getElementById('area').value = '';
  20.                                 for (var i=0;i<lines.length;i++) {
  21.                                         var line = lines[i];
  22.                                         document.getElementById('area').value += line + '\n';
  23.                                 }
  24.                         }
  25.  
  26.                         function sortReverse()
  27.                         {
  28.                                 var lines = document.getElementById("area").value.split('\n'); //Get all lines from 'area'.
  29.                                 lines = lines.sort();
  30.                                 lines = lines.reverse();
  31.                                 document.getElementById('area').value = '';
  32.                                 for (var i=0;i<lines.length;i++) {
  33.                                         var line = lines[i];
  34.                                         document.getElementById('area').value += line + '\n';
  35.                                 }
  36.                         }
  37.                 </script>
  38.         </head>
  39.         <body>
  40.                 <textarea cols='20' rows='40' id='area'></textarea>
  41.                 <button onclick='reverseList()'>Reverse</button>
  42.                 <button onclick='sortList()'>Sort A-Z</button>
  43.                 <button onclick='sortReverse();'>Sort Z-A</button>
  44.         </body>
  45. </html>
Tags
Manipulate Lists
Lists
Arrays
Sort Array
Javascript
Reverse Array

Add new comment

About text formats
  • 28 views