Sometimes functions need specific information to help them perform their tasks. Like a function that adds a player's name to a team.

<html>
<head>
<style> body { text-align: center; height: 350px; font-size: 16px; margin: 0 auto; background-color: #F0F8FF } button { width: 200px; height: 30px; font-size: 20px; border-radius: 5px; margin: 0 auto; display: block; color: black; outline: none;} h2 { text-align: center;} #playerList { text-align: left; }
</style>
</head>
<body id="main">
<h1>Add Team Players</h1>
<div class="Signup">
<div class="playerInput">
<input id="pInput" type="text" placeholder="Enter a player name"><br><br>
</div>
<button onClick="add()">Submit</button>
<h3>Current Team</h3>
</div>
<ul id=playerList>
</ul>
<p id ="full"></p>
<script>
var number = 0;
function add() {
if (number >= 3) {
document.getElementById("full").innerHTML = "Team Full";
} else {
var player = document.getElementById("pInput").value;
var node = document.createElement("P");
var textnode = document.createTextNode("Added: " + player);
node.appendChild(textnode);
document.getElementById("playerList").appendChild(node);
number++;
}
}
</script>
</body>
</html>]]>