Question

起草一份快速列表工具，列出当地儿童棒球队。对文本字段进行一些输入和写入操作。有一些验证，但也有，但这超出范围，似乎没有影响事情。

问题是，在将新结果写入段落元素（有效地替换它）之前，我无法弄清楚如何“捕获”现有文本，添加新输入并对整批进行排序。

到目前为止，我有：

var LeagueTeams = [];
var IndividualTeam = '';

LeagueTeams.push(document.forms[0].TeamName.value);
LeagueTeams.push(document.getElementById('TeamList')

LeagueTeams = LeagueTeams.sort();

for (j = 0; j < LeagueTeams.length; j++) {
    IndividualTeam = LeagueTeams.pop();
    IndividualTeam = IndividualTeam + '' + \n;
    document.forms[0].TeamName.value += IndividualTeam;
}

我最终获得的是我的输入，然后我的输入数组加上以前的内容，并有几个换行符。将操作符设置为=而不是= +会阻止它打印到数组。

即

输入：a 文字区域：a 然后输入：b 文字区域：a ab

（等）

Answer 1

好了，既然我们已经更好地了解了你想要做什么，这里有一些代码可以做到：

HTML：

<label>Enter Team Name: <input id="newTeam" type="text"></label> 
<button id="add">Add</button><br>
All Teams:<br>
<textarea id="allTeams" rows="40" cols="40"></textarea>

Javascript（普通的javascript，没有框架，在页面加载后调用）：

var teamList = ["Dodgers", "Mets", "Giants"];

document.getElementById("add").onclick = function() {
    var input = document.getElementById("newTeam");
    if (input.value) {
        teamList.push(input.value);
    }
    updateTeamList();
    input.value = "";
}

function updateTeamList() {
    teamList.sort();
    var o = document.getElementById("allTeams");
    o.value = teamList.join("\n");
}

updateTeamList();

而且，你可以看到它在这里工作：http://jsfiddle.net/jfriend00/HkhsL/

对现有代码的评论：

我不确定我是否理解你要整体做的事情，但是你是否意识到这个循环会有问题：

for (j = 0; j < LeagueTeams.length; j++) {
    IndividualTeam = LeagueTeams.pop();
    IndividualTeam = IndividualTeam + '' + \n;
    document.forms[0].TeamName.value += IndividualTeam;
}

每次执行LeagueTeams.pop()时，您都会缩短数组的长度，并且不断地在for循环中与LeagueTeams.length进行比较。这只会到达数组的一半，因为每次循环时，你都会递增j并递减LeagueTeams.length，这意味着你只会在数组中途通过。

如果你打算在for循环中一直遍历数组，那么你应该使用这个最初得到长度的版本并简化循环中的代码：

for (j = 0, len = LeagueTeams.length; j < len; j++) {
    document.forms[0].TeamName.value += LeagueTeams.pop() + '\n';
}

或者甚至更好，这个版本甚至不使用j：

while (LeagueTeams.length > 0) {
    document.forms[0].TeamName.value += LeagueTeams.pop() + '\n';
}

然后，我发现你正在尝试在一个包含字符串和DOM对象引用的数组上使用LeagueTeams.sort()。你想用这种方法做什么，因为内置的排序函数做了一个lexigraphical排序（例如alpha），它会用DOM引用做一些奇怪的事情（可能按任何toString()返回可能是对象类型排序）？

如果要按团队名称对输入进行排序，则需要将团队名称和DOM引用放入对象中，将该对象作为一个单元插入到数组中，然后使用将排序的自定义排序函数按对象中的名称。正如您的代码在上面编写的那样，您看到使用的document.getElementById('TeamList')对于所有团队都是相同的，所以我不确定为什么要将它放入数组中。

如果您可以展示HTML和更完整的代码版本，我们可以提供进一步的帮助。你上面的内容只是一段不起作用的代码，我们不知道你试图操作的HTML是什么样的。

仅供参考，您发布的代码中存在多个语法错误，因此无法运行代码：

在此结束时遗失了paren：LeagueTeams.push(document.getElementById('TeamList'))
缺少{n：IndividualTeam = IndividualTeam + '' + '\n';

Answer 2

如果您只是想列出一些团队，请尝试以下方法：

<script type="text/javascript">

function addTeam(form) {
  var para = document.getElementById('teamList');
  var teams = para.innerHTML.split(/<br\s*[\\]?>/);
  teams.push(form.teamName.value);
  para.innerHTML = teams.sort().join('<br>');
}

</script>

<form action="">
  <input type="text" name="teamName">
  <input type="button" value="Add team" onclick="addTeam(this.form)">
</form>
<p id="teamList"></p>

您可能正在使用不同的元素或布局，但策略应该大致相同。如果您为选择制作一组选项，事情会更容易一些。

JavaScript array.sort（）问题

2 个答案: