HTML

Question

我正在尝试通过要求用户将文本输入到一个放入数组的提示框中来创建一个非常简单的alphabetizer。然后，它将按字母顺序排列并输出它们。这是我到目前为止所做的：

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

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

Answer 1

在我看来，你的实际问题是如何进行DOM操作，这是一个问题

我想，我会保持简单。

首先在HTML中添加一个包含单词的元素。像

这样的东西

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

要通过javascript访问该元素，您将使用

var words = document.getElementById("words");

您的代码存在问题，因为Array.sort（）不返回已排序的数组，而是进行排序。您应该删除alphabetize变量并使用input。

来解决此问题

现在要将文本内容实际添加到段落中，您应该使用Node.textContent属性，如下所示：

words.textContent = input.join();

您可以在此处阅读有关mozilla devleper网络上DOM操作的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

Answer 2

prompt函数只返回一个字符串 - 用户输入的内容。因此，例如，如果用户在提示框中输入hello, apple, green, chicken，则数组将包含1个项目，字符串＆＃34; hello，apple，green，chicken＆＃34;。如果要通过分隔符＆＃34;，＆＃34;来分割此字符串，则可以在字符串上使用函数split。您的代码如下：

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

需要注意的另一件事是sort函数就位，这意味着你不会为它的结果分配一个变量，因为它不会返回任何内容。

要输出HTML中的单词，您可以使用函数document.getElementById来获取可以附加单词的<ul>（无序列表）对象：

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将如下所示：

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

Answer 3

以下是您可以做的事情：

Demo Fiddle

HTML

Input words: <input type="text" class="word">

<ul class="word-list"></ul>

JS

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
    }        
});

此解决方案使用jQuery。我建议您浏览一下使用过的函数：.each，.val，.keyup，.html，.append，以便能够完全理解代码。

如何使用JavaScript创建alphabetizer？

3 个答案:

HTML

JS