起草了一个快速列出工具,以列出当地的儿童棒球队。接受几个输入并写入文本字段。有一些验证,也没有什么,但这超出了范围,似乎并没有影响任何事情。

问题是,在将新结果写入段落元素(有效替换它)之前,我在弄清楚如何“捕获”现有文本,添加新输入并对整个批次进行排序时遇到了麻烦。

到目前为止,我有:

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

(等等)

最佳答案

好的,现在我们对您要执行的操作有了更好的了解,下面的代码可以做到这一点:

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()。您要如何处理该排序,因为内置的sort函数进行了按字母顺序排序的排序(例如alpha),这会对DOM引用产生一些奇怪的影响(可能是根据toString()返回的值(可能是对象类型)进行排序)?

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

如果您可以显示HTML和更完整的代码版本,我们将为您提供进一步的帮助。上面的内容只是一段无效的代码,我们不知道您要运行的HTML外观如何。

仅供参考,您发布的代码中存在一些语法错误,因此该代码无法运行:


此末尾缺少括号:LeagueTeams.push(document.getElementById('TeamList'))
\ n周围缺少引号:IndividualTeam = IndividualTeam + '' + '\n';

10-05 22:34