Using two textareas (one input and one output) and JavaScript to make an alphabetizer

Question

I am trying to create a simple alphabetizer using HTML's textarea and JavaScript. The user enters their words in the input textarea and when a button is pressed, the alphabetized list will show up on the output textarea. I can't seem figure out how to make it work. Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8" />

    <title>Alphabetizier</title>
</head>
<body>
<h1>Meico's Alphabetizer</h1>

<button onclick="alphabetize()">Alphabetize!</button>
<textarea input="inputText" rows=5 cols=80 wrap=on></textarea>
<textarea output="outputText" rows=5 cols=80 wrap=on readonly></textarea>

    <script>
    var textarea = document.getElementById("input");
    function alphabetize() {
    textarea.value = textarea.value.split(" ").sort().join(" ")
}
    </script>
</body>
</html>

Whenever I click on the alphabetize button, I get the message "TypeError: textarea is null". There is no output on where the output textarea.

uncoder · Accepted Answer · 2014-08-21 21:57:52Z

2

You messed up your textareas' IDs:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset = "utf-8" />

  <title>Alphabetizier</title>
</head>
<body>
  <h1>Meico's Alphabetizer</h1>

  <button onclick="alphabetize()">Alphabetize!</button>
  <textarea id="inputText" rows=5 cols=80 wrap=on></textarea>
  <textarea id="outputText" rows=5 cols=80 wrap=on readonly></textarea>

  <script>
    var textarea = document.getElementById("inputText");
var textarea2 = document.getElementById("outputText");
    function alphabetize() {

       textarea2.value = textarea.value.split(" ").sort().join(" ")
    }
  </script>
</body>
</html>

answered Aug 21, 2014 at 21:57

uncoder

1,9161 gold badge17 silver badges20 bronze badges

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

1 Comment

Meico Hsiao Over a year ago

Thanks so much! This worked well, I understand what I did wrong now.

Collectives™ on Stack Overflow

Using two textareas (one input and one output) and JavaScript to make an alphabetizer

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