Bowling League Roster

JavaScript
1

Hello I am trying to make a bowling league roster. When I enter in a name the create button does not work. The create button is suppose to make a table, but it does not. So really I do not know if the remove button works. Could someone help me figure this out please.

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>Bowling League Roster</title>
	  <script type="text/javascript" src="Dom.js"></script>
	  <link rel="stylesheet" type="text/css" href="Default.css" />
	  </head>
		<body>

   <h1 id="Bowling League Roster"  class = "highlighted" >
   Bowling League Roster</h1>
			<br />
		<form action="#">
			<label for="gbid">What is Your Team Member's Name?</label>
			<input type ="gbid" value = "" onclick="addItem(document.getElementById('addBowler').rowIndex)" />
			</br>
   </body>
</html>
<script>
				function setStyle()
		{
			var bowler = prompt("Enter Bowler's Name to be added?");
			
			var elements = document.getElementsByTagName("bowler");
		}
		
		</script>
		<script>
		function addBowler()
		{
			var tbl = document.createElement("table");
			var tblRow = document.createElement("tbody");
			var body = document.getElementById("tableDiv");
			
			for (var rows = 0; rows < 5; rows++)
			{
				var row = document.createElement("tr");
				
				for (var columns = 0; columns < 5; columns++)
				{
					var cell = document.createElement("td");
					var cellText = document.createTextNode("Bowler " + rows + columns);
					cell.appendChild(cellText);
					row.appendChild(cell);
				}
				else
				tblBody.appendChild(row);
			}
			tbl.appendChild(tblBody);
			body.appendChild(tbl);
			tbl.setAttribute("border", "3");
		}
		
		
		</script>
        <body>	
		
		<form action = "FormProcessor.html" method="Get">
		<table border = "1" id = "getBowler">
		<tr><td id = "empty">Your Team Roster Is Empty</td></tr>
		</table>
		<p><input type ="Remove Bowler" value = "Remove Bowler" /></p>
		<input type = "button" value="removeBowler" onclick="removeBowler()"/>
		</form>
		</body>
	  </script>
	 
   </head>
   <body>
   
		<input type="button" value="Create Bowler" onclick="addBowler(document.getElementById(table))" />
		<br />
		<div id="tableDiv"></div>
   </body>
</html>
2

Hi there,

Your markup is totally shot.
For example you have two <body> tags.

Your basic page structure should be something like this:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <link href="path/to/your/stylesheet.css" rel="stylesheet" type="text/css">
  </head>
  
  <body>
    <!--  YOUR CONTENT HERE -->

    <script src="include/libraries/such/as/jquery/here"></script>
    <script>
      // Add any additional JS here
    </script>
  </body>
</html>

Try altering the code you posted so that it looks something like the above, then post back here if you are still having any problems.

3