Array sorting: Alphabetical and Numerically

Question

I want a webpage that has a text box. There are two buttons underneath the text box that says "Sort Alphabetically" and "Sort numerically." I want it so that whatever the user types in the box, it sorts. If the user types in numbers and letters, it will cancel the sorting and an alert will pop up saying "Cannot be letters and numbers." When the "Sort Alphabetically" button is clicked, the JavaScript code will activate and sort the words alphabetically. Same goes with the "Sort Numerically" button. I can't seem to get the words/numbers to sort.

HTML:

<html>
<head>
<title>Sorter</title>
<script type="text/javascript" src="sorter.js"></script>
</head>
<body>
<form>
Words/Numbers to Be Sorted:<input type="text" id="textbox" size="35"/>
<br/>
<button type="button" onclick="sortAbc()">Sort Alphabetically</button>
<button type="button" onclick="sortNumber()">Sort Numerically</button>
<br/>
<h1>Each number/word shall be separated by a space.</h1>
</form>
</body>
</html>

JavaScript:

function sortAbc() {
var captureText = document.getElementById('textbox');
captureText.sort();
//Help! How to make alert pop up when numbers and letters are typed?
}

function sortNumber() {
var captureNumb = document.getElementByid('textbox');
captureNumb.sort(function(a, b){return a-b});
//Same problem here! How to make alert pop up when numbers and letters are typed?
}

Where is your approach? Where is your jQuery anyway? You have to use the onChange event from the text input box... — algorhythm
– algorhythm, Commented Sep 24, 2014 at 20:08
Hire a developer or do due diligence and make a decent attempt at it before you ask others to do your work. — Russell Bevan
– Russell Bevan, Commented Sep 24, 2014 at 20:10
I think it's very complex to sort the field in which you are typing. You can maybe wait for some seconds or for leaving focus to this field and than sort it. If you want to sort it while typing then you shall get the content (string) and divide it be whitespaces. The resulting array you can sort. Then back to string and in the textbox. But where you want to set the position of the cursor while sorting...? — algorhythm
– algorhythm, Commented Sep 24, 2014 at 20:11
@algorhythm It appears that yolotheone is asking for the check to happen in the sorting functions. — Enigmadan
– Enigmadan, Commented Sep 24, 2014 at 20:11

Nicolas Albert · Accepted Answer · 2014-09-24 20:26:16Z

1

Here a complet live sample.

check for number or words using regular expression (.match)
use the array function sort

function sortAbc() {
   var captureText = document.getElementById('textbox');
   if (captureText.value.match(/(?:^| )[\d]+(?: |$)/)) {
     alert("no digits");
     return;
   }
   var words = captureText.value.split(" ");
   captureText.value = words.sort().join(" ");
}

function sortNumber() {
   var captureNumb = document.getElementById('textbox');
   if (captureNumb.value.match(/[^\s\d]/)) {
     alert("no letters");
     return;
   }
   var numbers = captureNumb.value.split(" ");
   captureNumb.value = numbers.sort(function (a, b) { return a - b }).join(" ");
}

<html>
<head>
<title>Sorter</title>
<script type="text/javascript" src="sorter.js"></script>
</head>
<body>
<form>
Words/Numbers to Be Sorted:<input type="text" id="textbox" size="35"/>
<br/>
<button type="button" onclick="sortAbc()">Sort Alphabetically</button>
<button type="button" onclick="sortNumber()">Sort Numerically</button>
<br/>
<h1>Each number/word shall be separated by a space.</h1>
</form>
</body>
</html>

edited Sep 24, 2014 at 20:26

answered Sep 24, 2014 at 20:21

Nicolas Albert

2,5961 gold badge18 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Centril Over a year ago

Since sport() returns the array you can just do: split("").sort(comparator).join("") which is more elegant imho.

Collectives™ on Stack Overflow

Array sorting: Alphabetical and Numerically

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related