JavaScript array.sort() Issue

drafting up a quick listing tool to list local kids baseball teams. Takes a couple of inputs and writes to a text field. There's some validation and whatnot too, but that's out of scope and doesn't seem to be impacting things.

Problem is, I'm having trouble figuring out how to "capture" the existing text, add the new inputs and sort the whole lot, before writing the new result to the paragraph element (effectively replacing it).

So far I have:

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

What I end up getting is my input, and then an array of my input PLUS the previous contents, with a couple of line breaks. Setting the operator to = instead of =+ stops it from printing to the array at all.

i.e.

Enter: a Text area: a Then enter: b Text area: a ab

(etc)

OK, now that we have a better idea of what you're trying to do, here's some code that will do that:

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 (plain javascript, no framework, called after page is loaded):

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

And, you can see it working here: http://jsfiddle.net/jfriend00/HkhsL/

Comments on your existing code:

I'm not sure I understand what you're trying to do overall, but do you realize that this loop is going to have problems:

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

Each time you do LeagueTeams.pop() you are reducing the length of the array and you're continually comparing to LeagueTeams.length in the for loop. This will only get half way through the array because each time through the loop, you increment j and decrement LeagueTeams.length which means you'll only get half way through the array.

If you intend to iterate all the way through the array in your for loop, you should use this version that gets the length once initially and simplifies the code in the loop:

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

or perhaps even better, this version that doesn't even use j:

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

Then further, I see that you're trying to use LeagueTeams.sort() on an array that has both strings in it and DOM object references. What are you trying to do with that sort because the built-in sort function does a lexigraphical sort (e.g. alpha) which will do something odd with a DOM reference (probably sort by whatever toString() returns which may be object type)?

If you want to sort the input by team name, then you would need to put both team name and the DOM reference into an object, insert that object into the array as one unit and then use a custom sort function that would sort by the name in the object. As your code is written above, you see to be using document.getElementById('TeamList') which is the same for all teams so I'm not sure why you're putting it into the array at all.

If you can show your HTML and a more complete version of your code, we could help further. What you have above is just a non-working piece of code and we don't know what your HTML looks like that it's trying to operate on.

FYI, there are several syntax errors in the code you posted, so this can't be running code:

1. Missing paren at the end of this: LeagueTeams.push(document.getElementById('TeamList'))
2. Missing quotes around \n: IndividualTeam = IndividualTeam + '' + '\n';

If you are just trying to make a list of the teams, try something like:

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

You may be using different elements or layout, but the strategy should be about the same. If you are making a set of options for a select, things are a little easier.