使用两个文本区域(一个输入和一个输出)和JavaScript创建一个字母排序器

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

本文关键字：一个 创建 JavaScript 排序 输出 区域 文本 输入 两个      更新时间：2023-09-26

我正在尝试使用HTML的textarea和JavaScript创建一个简单的字母排序器。用户在输入文本区域输入他们的单词，当按下按钮时，按字母顺序排列的列表将显示在输出文本区域上。我似乎不知道该怎么做。下面是我的代码:

<!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>

每当我点击字母排序按钮时，我得到消息"TypeError: textarea is null"。

你把textareas的id弄乱了:

<!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>
相关文章：