Dynamic creation of table rows and cells and removal on setting change

Page 1 of 1

1 Replies - 309 Views - Last Post: 09 January 2013 - 06:42 AM

#1 njgmoorman  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 57
  • Joined: 02-October 12

Dynamic creation of table rows and cells and removal on setting change

Posted 09 January 2013 - 05:53 AM

I'm trying to fill a table with rows and cells (amounts depending on the difficulty chosen) with each cell having a 3px border. I also want all children of the table tag removed when the difficulty is changed and recreated to match that difficulty's settings. My problem, I think, is in the javascript, but I'm not quite sure where. What happens when the radio button for difficulty is clicked, all children of the table tag are removed and the newGame function is called, in that order. For some reason, however, the newGame function isn't working.

HTML:
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8" />
	<title>Minesweeper</title>
	<script src="minesweeper.js" type="text/javascript"></script>
	<link rel="stylesheets" href="minesweeper.css" type="text/css" />
</head>
<body>
	<div>
		<form id="form">
			<input type="radio" name="radio" value="1" onclick="clearTable();newGame(this.value);" /><label> - BEGINNER</label>
			<input type="radio" name="radio" value="2" onclick="clearTable();newGame(this.value);" /><label> - EASY</label>
			<input type="radio" name="radio" value="3" onclick="clearTable();newGame(this.value);" /><label> - MEDIUM</label>
			<input type="radio" name="radio" value="4" onclick="clearTable();newGame(this.value);" /><label> - HARD</label>
			<input type="radio" name="radio" value="5" onclick="clearTable();newGame(this.value);" /><label> - EXPERT</label>
		</form>
	</div>
	<div id="div2">
		<table id="table">
		</table>
	</div>
</body>
</html>

JS:
var table, allChildren, i, difficulty, winloss, hw, mines, tdCounter, trCounter, tr, td, tdClass;
// radios = document.getElementById("form").childNodes;
table = document.getElementById("table");
allChildren = table.childNodes;
function askNewGame(winloss) {
	alert("You " + winloss +" To play again, choose a difficulty.");
}

function makeGame(hw, mines, tdClass) {
	for (trCounter=0;trCounter<hw;trCounter++) {
		tr = document.getElementById("table").insertRow(trCounter);
		tr.id = ("row" + trCounter.toString());
		for (tdCounter=0;tdCounter<hw;tdCounter++) {
			td = document.getElementById("row" + trCounter.toString()).insertCell(tdCounter);
			td.className = tdClass;
			//document.getElementById("row" + trCounter.toString()).appendChild(td);
		}
	}
}

function newGame(difficulty) {
	switch (difficulty) {
		case "1":
		hw=5;
		mines=5;
		tdClass = "beginner";
		break;
		
		case "2":
		hw=7;
		mines=20;
		tdClass = "easy";
		break;
		
		case "3":
		hw=10;
		mines=25;
		tdClass = "medium";
		break;
		
		case "4":
		hw=20;
		mines=100;
		tdClass = "hard";
		break;
		
		case "5":
		hw=30;
		mines=450;
		tdClass = "expert";
		break;
	}
	makeGame(hw, mines, tdClass);
}
function gameOver() {
	askNewGame("Lost.");
}

function clearTable() {
	for (i=0;i<=allChildren.length;i++) {
		table.removeChild(allChildren[i]);
	}
}


CSS:
td {
	border: 3px solid #555;
}

.beginner {
	width: 100px;
	height: 100px;
}

.easy {
	width: 71px;
	height: 71px;
}

.medium {
	width: 50px;
	height: 50px;
}

.hard {
	width: 25px;
	height: 25px;
}

.expert {
	width: 16px;
	height: 16px;
}


My errors could easily be in the HTML or CSS so I included all 3.

Is This A Good Question/Topic? 0
  • +

Replies To: Dynamic creation of table rows and cells and removal on setting change

#2 andrewsw  Icon User is offline

  • Provides a RESTful service
  • member icon

Reputation: 1078
  • View blog
  • Posts: 3,360
  • Joined: 12-December 12

Re: Dynamic creation of table rows and cells and removal on setting change

Posted 09 January 2013 - 06:42 AM 

var table, allChildren, i, difficulty, winloss, hw, mines, tdCounter, trCounter, tr, td, tdClass;


You have these as global variables, but most of them will change frequently. Just create them as you need them within your functions. In particular,

table = document.getElementById("table");
allChildren = table.childNodes; // there are no children initially


you are running this straight-away, before the table even exists on the page. And, initially, the table has no children, so this generates errors.

Please don't use table as an id?! It will only cause confusion and possible error. Even tbl is better. Show some imagination..

<input type="radio" name="radio" value="1" onclick="clearTable(tbl);newGame(this.value);">

(You are using HTML5 so don't need /> )

function clearTable(tblID) {
    var theTable = document.getElementById(tblID);
    var allChildren = theTable.childNodes;
    if (allChildren) {
        for (i=0; i < allChildren.length; i++) {
            theTable.removeChild(allChildren[i]);
        }
    }
}


You were also looping to <= allChildren - it should be < otherwise you will be referring to an element that doesn't exist.

Ugh please don't use 'form' as your form id and 'radio' as your radio-names >.<
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1