Skip to main content

List Manipulator in Javascript


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.

  1. <head>
  2.  
  3. </head>
  4. <body>
  5. <textarea cols='20' rows='40' id='area'></textarea>
  6. <button onclick='reverseList();'>Reverse</button>
  7. <button onclick='sortList();'>Sort A-Z</button>
  8. <button onclick='sortReverse();'>Sort Z-A</button>
  9. <button onclick='randomise();'>Randomise</button>
  10. </body>
  11. </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>

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.