How To Sort Textarea Value Using Arrays Javascript

Question

I need to sort the value of a textarea using arrays in JavaScript.

I tried this code but nothing happened:

var x = [];
x.push(myInput.value);
x.join("/n");
x = x.sort();
myOuput.value = x.toString();

My HTML code:

<textarea id="input"></textarea>
<p>
<textarea id="output"></textarea>
<p>
<button id="button">Click</button>
<p>
<div id="test"></div>

<script src="main.js"></script>

Edit: Thank you! All the answers were helpful to me and this is my code now:

var z = myInput.value.split('\n');
z = z.sort();
myOuput.value = z.join('\n');

well not sure what you are expecting to happen.... Is the text area full of new lines and you want to sort the items that way? Currently the code has one index and you do some sort of join which does nothing, and than you sort the one index and than put that one index into the text area. — epascarello
– epascarello, Commented Dec 14, 2017 at 19:09

Donald Duck is with Ukraine · Accepted Answer · 2017-12-14 19:53:30Z

2

split the string into an array, sort it, then join it back together:

var textarea = document.getElementById('theTextareaId'); // or whatever...
textarea.value = textarea.value.split('\n').sort().join('\n');

edited Dec 14, 2017 at 19:53

Donald Duck is with Ukraine

9,00223 gold badges82 silver badges106 bronze badges

answered Dec 14, 2017 at 19:13

Negi Rox

3,9421 gold badge14 silver badges18 bronze badges

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

Comments

creighcl · Accepted Answer · 2017-12-14 19:32:09Z

Using the HTML included, it appears that you'd like to move the sorted list over to the output textarea. If this is the case, try:

<textarea id="input">Lorem
Foo
Ipsum
Bar</textarea>
<p>
<textarea id="output"></textarea>
<p>
<button id="button" onClick="sortInput()">Click</button>
<p>
<div id="test"></div>

Your Javascript:

function sortInput(){
  var inputField = document.getElementById('input');
  var outputField = document.getElementById('output');

  var lineArray = inputField.value.split('\n'); //create array of strings
  lineArray.sort(); //sort the array
  outputField.value = lineArray.join('\n'); //join it together in the output
}

edit: You'll likely want to more clearly define your .sort() method since the default is not very robust. It doesn't sort necessarily as you would expect with capitalization. documentation

Nina Scholz · Accepted Answer · 2017-12-14 19:14:47Z

0

You could take the value, split it by new line, sort it, join it with new line and assign the value back.

function sort(t) {
    t.value = t.value.split('\n').sort().join('\n');
}

<textarea onchange="sort(this)" rows="10"></textarea>

answered Dec 14, 2017 at 19:14

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Comments

Scott Marcus · Accepted Answer · 2017-12-14 19:21:16Z

When you call the .join() method of an array, it returns a string. Your code does not capture that return value, so the joined result is immediately thrown out.

Additionally, you don't want to put the entire textarea value into the array. Instead, you need to split that string (where there are new lines), which returns an array. Then, you can sort that array.

var ta = document.querySelector("textarea");
var btn = document.querySelector("input[type=button]");
var output = document.querySelector("div");

btn.addEventListener("click", function(){
  var x = ta.value.split(/\n+/);     // Split up input into an array
  x = x.sort();                      // Sort results
  output.innerHTML = x.join("<br>"); // Display sorted output on new lines
});

textarea { height:7em; }

<textarea>z
x
c
a
zz
k</textarea>
<input type="button" value="Sort">
<div></div>

Collectives™ on Stack Overflow

How To Sort Textarea Value Using Arrays Javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related