how could a textarea tag be sorted alphabeticaly and outputted in another textarea tag using javascript?

Question

I am wondering how the contents of a <textarea> tag could be sorted alphabetically and then outputted in another second <textarea> tag using javascript.

There are some questions similar to this one asked before on StackOverflow but I don't think that any of their answers can be applied to my code below.

Here is my code:

 .con { display: flex; margin-top: 2px; margin-left: 20px; }.button { background: #4CAF50; border: none; outline: none; color: #ffffff; padding: 14px; height: 60px; width: 140px; border-radius: 0 10px; margin-top: 0px; font-size: 22px; cursor: pointer; }.txt { display: flex; margin-right: 20px; background: #ffffff; border: 0; outline: none; height: 700px; width: 45%; border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin-top: 0px; }.text { border: none; margin-top: 18px; margin-left: 18px; height: 660px; width: 630px; outline: none; font-size: 22px; resize: none; }.asci { background: #ffffff; border: 0; outline: none; height: 700px; width: 45%; border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }.ascii { border: none; margin-top: 20px; margin-left: 10px; height: 660px; width: 640px; outline: none; font-size: 22px; resize: none; }

 <html> <head> <title>alphabetical order machine</title> <link rel="stylesheet" href="ascii.css"> </head> <body> <div class="con"> <form class="txt"> <textarea class="text" id="input" type="text" placeholder="type your text here"></textarea> <input class="button" type='button' value="alphabetize" onclick=""> </form> <form class="asci"> <textarea class="ascii" id="output" type="text" placeholder="your alphabetized text will appear here"></textarea> </form> </div> <script src="ascii.js"></script> </body> </html>

Does anyone know how to solve this?

Answer 1

First I would begin with split() ting the value of the textarea element into an array:

//split the value on a space character
let wordsArr = document.querySelector('#input').value.split(' ');

Then sort the array:

wordsArr.sort((a, b) => {
    const word1 = a.toUpperCase();
    const word2 = b.toUpperCase();
    if (word1 < word2) {
        return -1;
    }
    if (word2 > word1) {
        return 1;
    }
    /* if neither of those if statements fire, that means the words are the 
    same and can stay in the same position */
    return 0;
};

Then join the array elements back into a single string, and set that as the value of the other textarea:

document.querySelector('#output').value = wordsArr.join(' ');

MDN Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Answer 2

I too would start with split but let's not reinvent the world. you can use the js array sort, toString and replace methods in a 4 line function

 function myFunction(){ var text = document.getElementById('input').value; var textArray = text.split(" ").sort(); var output= document.getElementById('output'); output.value = textArray.toString().replace(/,/g," "); }

 .con { display: flex; margin-top: 2px; margin-left: 20px; }.button { background: #4CAF50; border: none; outline: none; color: #ffffff; padding: 14px; height: 60px; width: 140px; border-radius: 0 10px; margin-top: 0px; font-size: 22px; cursor: pointer; }.txt { display: flex; margin-right: 20px; background: #ffffff; border: 0; outline: none; height: 700px; width: 45%; border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin-top: 0px; }.text { border: none; margin-top: 18px; margin-left: 18px; height: 660px; width: 630px; outline: none; font-size: 22px; resize: none; }.asci { background: #ffffff; border: 0; outline: none; height: 700px; width: 45%; border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }.ascii { border: none; margin-top: 20px; margin-left: 10px; height: 660px; width: 640px; outline: none; font-size: 22px; resize: none; }

 <html> <head> <title>alphabetical order machine</title> <link rel="stylesheet" href="ascii.css"> </head> <body> <div class="con"> <form class="txt"> <textarea class="text" id="input" type="text" placeholder="type your text here"></textarea> <input class="button" type='button' value="alphabetize" onclick="myFunction()"> </form> <form class="asci"> <textarea class="ascii" id="output" type="text" placeholder="your alphabetized text will appear here"></textarea> </form> </div> <script src="ascii.js"></script> </body> </html>

Answer 3

You need to use split() and sort() .

Here is your code:

 function myFunction() { const input1 = document.getElementById("input"); const input2 = document.getElementById("output"); let content = input1.value; //Get its content var array = content.split(" "); //And replace each space by a comma to make an array. input2.value = array.sort(); //alphabetize it. input2.value = input2.value,replace(","; " "). //Restore the spaces. }

 .con { display: flex; margin-top: 2px; margin-left: 20px; }.button { background: #4CAF50; border: none; outline: none; color: #ffffff; padding: 14px; height: 60px; width: 140px; border-radius: 0 10px; margin-top: 0px; font-size: 22px; cursor: pointer; }.txt { display: flex; margin-right: 20px; background: #ffffff; border: 0; outline: none; height: 700px; width: 45%; border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin-top: 0px; }.text { border: none; margin-top: 18px; margin-left: 18px; height: 660px; width: 630px; outline: none; font-size: 22px; resize: none; }.asci { background: #ffffff; border: 0; outline: none; height: 700px; width: 45%; border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }.ascii { border: none; margin-top: 20px; margin-left: 10px; height: 660px; width: 640px; outline: none; font-size: 22px; resize: none; }

 <head> <title>alphabetical order machine</title> </head> <body> <div class="con"> <form class="txt"> <textarea class="text" id="input" type="text" placeholder="type your text here"></textarea> <input class="button" type='button' value="alphabetize" onclick="myFunction();"> </form> <form class="asci"> <textarea class="ascii" id="output" type="text" placeholder="your alphabetized text will appear here"></textarea> </form> </div> </body>

Answer 4

Register the 'input' and the 'click' event to form. Create an event handler for each event.
```
 document.forms.ID.oninput = inputHandler; document.forms.ID.onclick = clickHandler;
```
When creating event handlers, pass the event object
```
 function inputHandler(e) {...
```

Define variables that reference:

A NodeList of all form fields

 /* - "this" is the form tag -.elements is a property that collects all form type tags */ const field = this.elements;

The tag user interacted with

 /* - e.target property always points to the tag a user has clicked, changed, entered data upon, etc. */ const input = e.target;

Any other relevant tags like an output

 /* - Any input, output, textarea, etc you want to access just prefix the NodeList identifier (see first variable) to any form type tag #id or [name] */ const output = field.output;

Next, define a conditional that will determine which tag you want to deal with (usually e.target ) and nothing else. By excluding other unnecessary tags, you have complete control of what does what and how it's done.
```
 if (e.target.id === 'input') {... /* OR */ if (e.target.className === 'button') {...
```

Demo

 const form = document.forms.editor; form.oninput = copyText; form.onclick = sortText; function copyText(e) { const ui = this.elements; const inp = e.target; const out = ui.output; if (inp.id === 'input') { out.value = inp.value; } } function sortText(e) { const ui = this.elements; const btn = e.target; const out = ui.output; if (btn.className === "button") { let result = out.value.split(' ').sort((a, b) => a - b); out.value = result; } }

 .box { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; } textarea { width: 90vw; height: 30vw; }.button { display: block; width: 90vh; height: 5vw; margin: 5px auto; }

 <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title></title> </head> <body> <form id="editor"> <fieldset> <textarea id="input" placeholder="Enter a space-delimited list of items here"></textarea> <button class="button" type='button'>Sort</button> <textarea id="output" placeholder="Sorted list will be provided here"></textarea> </fieldset> </form> </body> </html>

how could a textarea tag be sorted alphabeticaly and outputted in another textarea tag using javascript?

Question

4 answers

solution1
2 2020-04-16 19:03:50

solution2
1 ACCPTED 2020-04-16 19:12:42

solution3
1 2020-04-16 19:16:20

solution4
1 2020-04-16 20:27:22

Demo

how could a textarea tag be sorted alphabeticaly and outputted in another textarea tag using javascript?

Question

4 answers

solution1 2 2020-04-16 19:03:50

solution2 1 ACCPTED 2020-04-16 19:12:42

solution3 1 2020-04-16 19:16:20

solution4 1 2020-04-16 20:27:22

Demo

solution1
2 2020-04-16 19:03:50

solution2
1 ACCPTED 2020-04-16 19:12:42

solution3
1 2020-04-16 19:16:20

solution4
1 2020-04-16 20:27:22