Create image tag inside all td tags with a certain name attribute

Page 1 of 1

1 Replies - 355 Views - Last Post: 14 January 2013 - 10:55 AM

#1 njgmoorman  Icon User is offline

  • D.I.C Head

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

Create image tag inside all td tags with a certain name attribute

Posted 14 January 2013 - 05:54 AM

I'm trying to build Minesweeper from the ground up (just for fun) and I'm having some trouble making all the squares with mines display the mine image when one of them is clicked. The way it works is it generates a table and randomly selects a certain amount of squares and gives them an onclick attribute and a name attribute. Those are the squares that should cause game over. I am encountering a problem with the image showing up when one of them is clicked. Take a look at my code.

JS:

var i, winloss, hw, mines, tdCounter, trCounter, tdClass;
// radios = document.getElementById("form").childNodes;
//table = document.getElementById("game");
var difficulty = "";
var table;
i=0;
winloss="";
tdCounter = 0;
function askNewGame() {
	alert("You " + winloss +" To play again, choose a difficulty.");
}
//var div = document.getElementById("div2");
function makeGame(hw, mines, tdClass) {
	table = document.createElement("table");
	table.id = "game";
	document.getElementById("div2").appendChild(table);
	for (trCounter=0;trCounter<hw;trCounter++) {
		var tr = table.insertRow(trCounter);
		tr.id = ("row" + trCounter.toString());
		for (tdCounter=0;tdCounter<hw;tdCounter++) {
			var td = document.getElementById(("row" + trCounter.toString())).insertCell(tdCounter);
			td.className = tdClass;
			td.innerHTML = "<strong></strong>";
			//document.getElementById("row" + trCounter.toString()).appendChild(td);
		}
	}
	genMines();
	/*if (tableChildren) {
		tableChildren = table.childNodes;
	}
	else {
		var tableChildren = table.childNodes;
	}*/
}

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() {
	winloss = "Lost.";
	for (var e=0;e<tds.length;e++) {
		if (tds[e].getAttribute("name") === "mined") {
			/*var bomb = document.createElement("img");
			bomb.setAttribute("src", "mine.png");
			tds[e].appendChild(bomb);*/
			tds[e].innerHTML = "<img src='mine.png' />";
		}
	}
	askNewGame();
}

function clearTable() {
	if (table) {
		/*if (table.childNodes !== undefined) {
			if (tableChildren) {
				tableChildren = table.childNodes;
			}
			else {
				var tableChildren = table.childNodes;
			}
			for (i=0;i<tableChildren.length;i++) {
				table.removeChild(tableChildren[i]);
			}
		}*/
		table.parentNode.removeChild(table);
	}
}

function genMines() {
	var tds = table.getElementsByTagName("td");
	var mineCount;
	for (mineCount=0;mineCount<=mines;mineCount++) {
		var index = Math.floor(Math.random()*((hw*hw)-1) + 0);
		tds[index].setAttribute("onclick", "gameOver();");
		tds[index].setAttribute("name", "mined");
	}
}
/*function aC() {
	if (allChildren) {
		allChildren = table.childNodes;
	}
	else {
		var allChildren = [];
	}
}*/


HTML:

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


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;
}

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

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

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

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

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


I know that I have the image in the same file.

Is This A Good Question/Topic? 0
  • +

Replies To: Create image tag inside all td tags with a certain name attribute

#2 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 2937
  • View blog
  • Posts: 7,690
  • Joined: 08-June 10

Re: Create image tag inside all td tags with a certain name attribute

Posted 14 January 2013 - 10:55 AM

there are two main problems:

* line #105
this is not how you do event handling in Java​Script (and it never has been). in the oldest, simplest and most compatible way, you would use event properties:
tds[index].onclick = gameOver; // note that there are no parentheses!

if you don’t have to concern yourself with IE < 9, then the state-of-the-art event listeners are your choice
// for a capturing event
tds[index].addEventListener("click", gameOver, true);

// and for a bubbling event
tds[index].addEventListener("click", gameOver, false);

advantage: you can add more than one handler function for an event type.


* line #106
the name attribute is invalid for <td> elements (that you may work around that is of no concern). why not using a class for that? to apply the size to all <td>s you don’t need an extra class. instead apply an appropriate class to the table and let CSS handle the rest .expert td { /* … */ }


with regard to setAttribute() / getAttribute - avoid if possible.

This post has been edited by Dormilich: 14 January 2013 - 10:56 AM

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1