Team Generator

HTML

<div id="header">Team Generator</div>
<div id="main">
    <div id="left">
        <br>
        <textarea id="pl" class="pl ta" readonly></textarea><br>
        <input type="text" id="apt" maxlength="24" />
        <input type="button" id="ap" onClick="addPlayer()" value="Add Player" /><br>
        <input type="button" id="gt" onClick="clrPlayers()" value="Clear Players" /><br>
        <input type="button" id="gt" onClick="genTeams()" value="Generate Teams" />
        <div id="mail"></div>
    </div>
    
    <div id="right">
        <div id="red" class="pl"></div>
        <div id="blue" class="pl"></div>
        <div id="blue" class="pl"></div>
        <div id="blue" class="pl"></div>
    </div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
    font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
    font-size: 10px;
    background-color: #333;
}

#header {
    margin: 0 auto;
    padding: 10px 20px;
    width: 498px;
    font-size: 42pt;
    font-weight: bold;
    font-family: Futura, "Trebuchet MS", Arial, sans-serif;
    text-align: center;
    color: #FFF;
    background-color: #666;
    border: 1px solid #000;
}

#main {
    margin: 0 auto;
    width: 560px;
}

#left {
    margin: 10px;
    float: left;
}

#right {
    margin: 10px;
    margin-left: -5px;
    float: right;
}

.pl {
    margin: 0;
    padding: 5px 7px 5px 10px;
    width: 300px;
    background-color: #666;
    border: 1px solid #000;
}

.pli {
    margin: 5px 0;
    padding: 3px 10px;
    height: 22px;
    color: #999;
    font-size: 13pt;
    background-color: #333;
    border: 1px solid #000;
}

#instructions {
    margin-bottom: 5px;
    padding: 0px;
    padding-left: 2px;
    width: 204px;
    height: 200px;
}

#ap, #dp, #gt, #apt, #mailto {
    margin: 5px;
    padding: 5px;
    color: #FFF;
    text-decoration: none;
    background-color: #666;
    border: 1px solid #000;
}

#gt {
    margin-top: 2px;
    margin-left: 0px;
    width: 208px;
}

#mailto {
    margin-top: 2px;
    margin-left: 0px;
    padding-left: 0;
    padding-right: 0;
    display: block;
    width: 206px;
    text-align: center;
}

.ta {
    width: 189px;
    height: 45px;
    background-color: #FFF;
}

#dp {
    margin: -1px -8px 0 0;
    float: right;
    font-size: 10px;
}

#apt {
    margin: 0;
    color: #333;
    background-color: #FFF;
}

.red{color:#FFF;background-color:#F00}

.blue{color:#FFF;background-color:#00F}

JavaScript

players = ["Player1", "Player2"];
colors = ["Red", "Blue"];

document.querySelector('#apt').onkeydown = function(e) {
    if (e.keyCode === 13) {
        addPlayer();
    }
};

addPlayer = function() {
    playerName = document.querySelector('#apt').value;
    if (playerName !== "") {
        if (players.indexOf(playerName) == -1) {
            players.push(playerName);
        }
    }
    document.querySelector('#apt').value = "";
    document.querySelector('#apt').focus();
    genPL();
};

delPlayer = function(playerName) {
    index = players.indexOf(playerName);
    players.splice(index, 1);
    colors.splice(index, 1);
    genPL();
};

clrPlayers = function() {
    players = [];
    colors = [];
    genPL();
};

emailTeams = function() {
    function teams() {
        redTeam = "";
        blueTeam = "";

        for (i = 0; i < players.length; i++) {
            if (colors[i] === "red") {
                redTeam += players[i] + ", ";
            } else if (colors[i] === "blue") {
                blueTeam += players[i] + ", ";
            }
        }

        redTeam += ",";
        blueTeam += ",";

        redTeam = redTeam.split(", ,")[0];
        blueTeam = blueTeam.split(", ,")[0];

        return "Red Team: " + redTeam + "<br> Blue Team: " + blueTeam;
    }

    if (players.length > 1) {
        if (colors.length = players.length) {
            document.querySelector("#mail").innerHTML = '<a id="mailto" href="mailto:?Subject=Team%20Generator&Body=' + teams() + '">Email Teams</a>';
        } else {
            document.querySelector("#mail").innerHTML = '<a id="mailto">No Teams to Email</a>';
        }
    } else {
        document.querySelector("#mail").innerHTML = '<a id="mailto">No Teams to Email</a>';
    }
};

genPL = function() {
    document.querySelector("#pl").innerHTML = " ";
    document.querySelector("#red").innerHTML = " ";
    document.querySelector("#blue").innerHTML = " ";
    if (players.length > 0) {
        pl = "Player List: ";
     ...