Functions need multiple parameters to work with two or more pieces of data, like a first and last name.
Submit your first and last names to see a function take two parameters, add them to a string, and display them on the website.
<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; } input { border-radius:5px; padding: 10px;margin: 10px; 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="firstNameInput" type="text" placeholder="First Name" > <input id="surnameInput" type="text" placeholder="Last 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 firstName = document.getElementById("firstNameInput").value; var surname = document.getElementById("surnameInput").value; var node = document.createElement("P"); var textnode = document.createTextNode("Added: " + firstName + " " + surname); node.appendChild(textnode); document.getElementById("playerList").appendChild(node); number++; } } </script> </body> </html>]]>