如何使用JavaScript创建字母排序器？_Javascript_Html_Arrays

如何使用JavaScript创建字母排序器？

javascript html arrays

如何使用JavaScript创建字母排序器？,javascript,html,arrays,Javascript,Html,Arrays,我试图创建一个非常简单的字母排序器，要求用户将文本输入到一个提示框中，并将其放入一个数组中。然后，它将按字母顺序排列单词并输出它们。以下是我目前掌握的情况： <!DOCTYPE html> <html lang="en"> <head> <meta charset = "utf-8" /> <title>Alphabetizier</title> </head> <body> <h1>Me

我试图创建一个非常简单的字母排序器，要求用户将文本输入到一个提示框中，并将其放入一个数组中。然后，它将按字母顺序排列单词并输出它们。以下是我目前掌握的情况：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8" />
<title>Alphabetizier</title>
</head>
<body>
<h1>Meico's Alphabetizer</h1>
    <script>
    var input = [prompt("Enter your words here")];
    var alphabetize = input.sort();
    var string = alphabetize.join();
    console.log(string);
    </script>
</body>
</html>


字母编辑
梅科字母编码器
var input=[提示（“在此处输入您的文字”）]；
var alphasorize=input.sort（）；
var string=字母顺序。join（）；
console.log（字符串）；

我似乎不知道我做错了什么。我暂时使用console.log并在浏览器上按F12查看结果。我不知道如何实际使用HTML输出按字母顺序排列的单词。

在我看来，您真正的问题是如何进行DOM操作，这是。。。有点问题

我想我会保持简单

首先，在HTML中添加一个元素来包含单词。差不多

<p id="words"></p>

在该数组中，您的代码有一个问题。sort（）不返回已排序的数组，而是就地排序。您应该通过删除

字母顺序

变量，然后只使用

输入

来解决这个问题

现在，要将文本内容添加到段落中，您应该使用

节点.textContent

属性，如下所示：

words.textContent = input.join();

您可以在这里阅读有关mozilla devleper网络上的DOM操作的更多信息：

函数只返回一个字符串，即用户输入的字符串。例如，如果用户在提示框中输入

hello，apple，green，chicken

，数组将包含1项，字符串“hello，apple，green，chicken”。如果要用分隔符“，”将该字符串拆分，则可以对该字符串使用函数

split

。您的代码如下所示：

var input = prompt("Enter your words: ");
var words = input.split(", ");
words.sort();
console.log(words);

<html>
<head>
...
</head>
<body>
    <ul id="my-list">
    </ul>
</body>
</html>

另一件需要注意的事情是，

sort

函数在适当的位置起作用，这意味着您不会为其结果分配变量，因为它不会返回任何内容

要以HTML格式输出单词，可以使用函数

document.getElementById

获取一个

（无序列表）对象，您可以将单词附加到该对象：

var input = prompt("Enter your words: ");
var words = input.split(", ");
words.sort();

var list = document.getElementById("my-list");
for (var word in words) {
    var child = document.createElement("li");
    child.innerHTML = word;
    list.appendChild(child);
}

使用此代码，您的HTML将如下所示：

var input = prompt("Enter your words: ");
var words = input.split(", ");
words.sort();
console.log(words);

<html>
<head>
...
</head>
<body>
    <ul id="my-list">
    </ul>
</body>
</html>

...

以下是您可以做的一个想法：

HTML

输入单词：

var-words=[]；
//将列表的内容呈现到.word列表中
var showWords=函数（）{
words.sort（）；//对单词进行排序
var$list=$（'.wordlist'）；
$list.html（“”）；//清除.word列表的最后一个内容
$.each（单词，函数（）{//遍历单词
$list.append（“”+this+“”）；//为每个单词追加一个列表项（这是指数组中的单词
});
};
$（'.word'）。在（'keyup'，函数（e）{//收听输入框中的每个按键
如果（e.which==13）{//如果我们按enter键
var$input=$（e.target）；//获取对inputbox的引用
var word=$input.val（）；//获取输入框的值
words.push（word）；//将其添加到数组中
$input.val（“”）；//清除输入框
showWords（）；//显示单词
}        
});

此解决方案使用jQuery。我建议您仔细阅读所使用的函数：，，以便能够完全理解代码。

@Sirko-他们真正的问题是“如何使用JavaScript输出HTML而不是写入控制台？”另外，去掉方括号。在您的例子中，方括号用于用单个项目组成一个数组。您可以使用

document.write

而不是

console.log

来查看输出。@Sirko:

.sort（）

返回原始数组。因此

输入===字母顺序；//true

不使用document.write。了解DOM，以及如何在JavaScript中创建元素。我从这里开始JavaScript没有

函数，也没有带

的$
对象。每个方法。答案都在编写中。刚刚添加了最后一秒指定jQuery用法的选项
var words = [];
// will render the contents of the list into the .word-list list
var showWords = function () {  
    words.sort();                              //sort the words
    var $list = $('.word-list');       
    $list.html('');                            // clear the last content of .word-list
    $.each(words, function () {                // iterate through the words
        $list.append('<li>' + this + '</li>'); // append a list item for each word (this refers to the word in the array
    });
};

$('.word').on('keyup', function (e) { // listen to each keypress in the input box
    if (e.which === 13) {             // if we pressed enter
        var $input = $(e.target);     // take the reference to the inputbox
        var word = $input.val();      // take the value of the input box 
        words.push(word);             // add it to the array
        $input.val('');               // clear the input box

        showWords();                  // show the words
    }        
});