TwinSpirit
asked on
JavaScript interactive Japanese puzzle won't work
I'm a second semester programming major. We are taking JavaScript and there is a case (Hanjie Interactive Puzzle) that I can't get to work. Any help would be greatly appreciated
jpf.jpg
<head>
<!--
New Perspectives on JavaScript, 2nd Edition
Tutorial 4
Case Problem 2
Hanjie Puzzle
Author: Beverly Hodges
Date: May 1, 2010
Filename: hanjie.htm
Supporting files: blackbar.gif, jpf.css, jpf.jpg, puzzle.js
-->
<title>Daily Hanjie Puzzle</title>
<link href="jpf.css" rel="stylesheet" type="text/css" />
<link href="stable.css" rel="stylesheet" type="text/css" />
<script type = "text/javascript" src = "puzzle.js"></script>
</head>
<body>
<form id="hanjieForm" name="hanjieForm" action="">
<div id="page">
<div id="header">
<img src="jpf.jpg" alt="The Japanese Puzzle Factory" />
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Online Puzzles</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Tips and Hints</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Competitions</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</div>
<ul id="column1">
<li><a href="#">Akari</a></li>
<li><a href="#">Divide by Box</a></li>
<li><a href="#">Fillomino</a></li>
<li><a href="#">Hanjie</a></li>
<li><a href="#">Hashiwokakero</a></li>
<li><a href="#">Heyawake</a></li>
<li><a href="#">Hitori</a></li>
<li><a href="#">Kakuro</a></li>
<li><a href="#">Katagaku</a></li>
<li><a href="#">Masugo</a></li>
<li><a href="#">Masyu</a></li>
<li><a href="#">Oekaki Logic</a></li>
<li><a href="#">Shikaku</a></li>
<li><a href="#">Sudoku</a></li>
<li><a href="#">Suhai</a></li>
<li><a href="#">Super Sudoku</a></li>
<li><a href="#">Tenketsu</a></li>
<li><a href="#">Tentai Show</a></li>
<li><a href="#">Wordoku</a></li>
<li><a href="#">Yajilin</a></li>
</ul>
<div id="column2">
<table class="hanjie">
<caption><strong>Hint: </strong> Panda</caption>
<colgroup>
<col class="firstCol" span="1" />
<col class="mainTable" span="20" />
</colgroup>
<thead>
<tr>
<td class="firstCol"></td>
<td>8<br />5</td><td>9<br />2<br />5</td><td>10<br />1</td><td>9<br />1</td>
<td>8<br />5<br />2</td><td>6<br />6<br />1</td><td>5<br />7<br />1</td><td>1<br />8<br />1</td>
<td>1<br />3<br />3<br />1</td><td>1<br />2<br />3<br />1<br />1</td>
<td>1<br />3<br />3<br />2<br />1<br />1</td>
<td>1<br />2<br />2<br />6<br />2</td>
<td>1<br />4<br />2<br />1<br />1</td>
<td>1<br />2<br />1<br />1</td>
<td>1<br />1<br />1<br />1</td><td>1<br />2<br />1<br />1</td>
<td>1<br />2<br />1<br />3<br />1<br />1</td>
<td>3<br />3<br />1<br />7<br />1</td>
<td>5<br />2<br />1<br />4<br />1<br />1</td>
<td>7<br />7<br />1<br />1</td>
</tr>
</thead>
<tr>
<td class="firstCol">6</td>
<td colspan="20" rowspan="25">
<table id="puzzleCells">
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td>
<td class="dark"></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td></td>
</tr>
<tr>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td style="border-right: 1px solid red"></td><td class="dark"></td><td></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td></td><td class="dark"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td class="dark"></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td class="dark"></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td></td><td style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td><td></td>
<td></td><td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td class="dark" style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red">
</td><td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
<td class="dark" style="border-bottom: 1px solid red"></td>
</tr>
<tr>
<td class="dark"></td><td></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td></td><td class="dark"></td>
<td class="dark"></td><td></td><td style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td class="dark"></td><td></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td class="dark"></td><td class="dark"></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td class="dark"></td><td></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td class="dark"></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td></td><td></td>
</tr>
<tr>
<td style="border-bottom: 1px solid red"></td><td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
<td style="border-right: 1px solid red; border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td class="dark" style="border-bottom: 1px solid red"></td>
<td style="border-bottom: 1px solid red"></td><td style="border-bottom: 1px solid red"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td><td class="dark"></td><td class="dark"></td>
</tr>
<tr>
<td></td><td class="dark"></td><td></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td class="dark"></td><td></td>
<td style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td><td></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td></td><td></td><td class="dark"></td>
</tr>
<tr>
<td></td><td></td><td></td><td class="dark"></td>
<td class="dark" style="border-right: 1px solid red"></td><td></td><td></td><td></td>
<td></td><td style="border-right: 1px solid red"></td><td></td><td class="dark"></td>
<td></td><td></td><td style="border-right: 1px solid red"></td><td></td>
<td></td><td class="dark"></td><td class="dark"></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
<td class="dark" style="border-right: 1px solid red"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td><td class="dark"></td>
<td class="dark"></td><td class="dark"></td><td class="dark" style="border-right: 1px solid red"></td>
<td class="dark"></td>
<td class="dark"></td><td></td><td></td><td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="firstCol">7 1</td>
</tr>
<tr>
<td class="firstCol">7 5 2</td>
</tr>
<tr>
<td class="firstCol">8 2 3</td>
</tr>
<tr>
<td class="firstCol">7 1 3</td>
</tr>
<tr>
<td class="firstCol">7 4</td>
</tr>
<tr>
<td class="firstCol">5 2</td>
</tr>
<tr>
<td class="firstCol">5 1</td>
</tr>
<tr>
<td class="firstCol">3 5 3</td>
</tr>
<tr>
<td class="firstCol">1 6 4</td>
</tr>
<tr>
<td class="firstCol">1 4 1 1 1 1</td>
</tr>
<tr>
<td class="firstCol">1 4 2 1 1</td>
</tr>
<tr>
<td class="firstCol">1 4 2 3</td>
</tr>
<tr>
<td class="firstCol">1 7 2 1</td>
</tr>
<tr>
<td class="firstCol">1 7 2 5</td>
</tr>
<tr>
<td class="firstCol">1 6 2 5</td>
</tr>
<tr>
<td class="firstCol">1 2 1 3</td>
</tr>
<tr>
<td class="firstCol">1 2 2</td>
</tr>
<tr>
<td class="firstCol">1 2 1</td>
</tr>
<tr>
<td class="firstCol">1 1 1</td>
</tr>
<tr>
<td class="firstCol">1 9</td>
</tr>
<tr>
<td class="firstCol">1</td>
</tr>
<tr>
<td class="firstCol">1 2 1</td>
</tr>
<tr>
<td class="firstCol">2 1 2</td>
</tr>
<tr>
<td class="firstCol">13</td>
</tr>
</table>
<p>
<input type="button" id="check" value="Check Solution" />
<input type="button" id="uncheck" value="Hide Checked Solution" /><br />
<label for="checkCount">Cells remaining</label>
<input type="text" id="checkCount" />
</p>
</div>
<div id="column3">
<h3>To Play</h3>
<p>
<strong>Hanjie</strong> is a Japanese logic puzzle played on a blank grid
of varying sizes. At the top of each column and to the right of each row are
sets of numbers that indicate how many cells in that column or row must be colored
in, working from the top of the column or from the left of the row.
</p>
<p>For example a column or row entry of "3 8 1" indicates that there is a block
of three consecutive darkened cells followed at some point by eight filled-in
cells and ending finally with one filled-in cell. The gap between consecutive
groups of filled-in cells has to be determined by clues provided in other
rows and columns in the grid.</p>
<p>A completed grid shows a pixelated image. A hint describing the image
is usually provided with the puzzle. For strategy hints, view the
<a href="#">Hanjie Strategy</a> page.</p>
<p>To play Hanjie online, click the cells in the provided grid to toggle the
cell color between black and white. To check your solution, click the
<strong>Check Solution</strong> button. The page will highlight
incorrectly-marked cells in red and display the number of cells that
still need to be marked.</p>
<p>
<input type="button" id="solution" value="Show Solution" />
<input type="button" id="hide" value="Reset Grid" />
</p>
</div>
</div>
</form>
</body>
</html>
puzzle.js
/*
New Perspectives on JavaScript, 2nd Edition
Tutorial 4
Case Problem 2
Author: Beverly Hodges
Date: May 1, 2010
Filename: puzzle.js
-------------------------------------------------------------
Function List:
setPuzzle()
Initializes event handlers for the cells within the Hanjie
table.
changeColor()
Toggles the background color of the active cell between
black and white
showSolution()
Shows the solution of the Hanjie puzzle
hideSolution()
Hides the solution of the Hanjie puzzle
checkSolution()
Checks the user's solution of the Hanjie puzzle
uncheckSolution()
Restores the user's solution of the Hanjie puzzle
to its original state
-------------------------------------------------------------
Global Variable List:
allCells
An object variable referencing all of the clickable cells
within the Hanjie puzzle
-------------------------------------------------------------
*/
window.onload = setPuzzle();
var allCells = new Array();
function setPuzzle() {
var puzzleTable = document.getElementById("puzzleCells");
allCells = puzzleTable.getElementByID("td");
for (var i = 0; i< allCells.length; i ++) {
allCells[i].style.background.display = "white";
allCells[i].onclick = changeColor;
}
document.getElementById("solution").onclick = showSolution;
document.getElementById("hide").onclick = hideSolution;
document.getElementById("check").onclick = checkSolution;
document.getElementById("uncheck").onclick = uncheckSolution;
}
function changeColor() {
if (allCells[i].style.background.display == "black") {
allCells[i].style.background.display = "white";
}else{
allCells[i].style.background.display = "black";
}
}
function showSolution() {
for (var i = 0; i< allCells.length; i ++) {
if (allCells[i].className == "dark") {
allCells[i].style.background.display = "black";
}else{
allCells[i].style.background.display = "white";
}
checkCount = "0";
}
}
function hideSolution() {
for (var i = 0; i< allCells.length; i ++) {
allCells[i].style.background.display = "white";
}
checkCount = " ";
}
function checkSolution() {
var checkCount = 0;
for (var i = 0; i< allCells.length; i ++) {
if (allCells[i].className == "dark" && allCells[i].style.background.display == "black") {
allCells[i].style.background.display = "red";
} else if (allCells[i].className == "dark" && allCells[i].style.background.display == "white"){
checkCount ++;
}
return checkCount.value;
}
}
function uncheckSolution() {
for (var i = 0; i< allCells.length; i ++) {
if (allCells[i].style.background.display == "red") {
allCells[i].style.background.display = "black";
}
checkCount = " ";
}
}
jpf.jpg
Second problem is
allCells = puzzleTable.getElementByID
that is not valid. it is getElementById, but you do not want that, you want
allCells = puzzleTable.getElementsByT
allCells = puzzleTable.getElementByID
that is not valid. it is getElementById, but you do not want that, you want
allCells = puzzleTable.getElementsByT
For me to see the rest, I think I need the CSS files too
ASKER
Thank you so much for your help! Here is the css file.
/*
New Perspectives on JavaScript, 2nd Edition
Tutorial 4
Case Problem 2
JPF Style Sheet
Filename: jpf.css
Supporting Files: left.jpg, topleft.jpg, topright.jpg
*/
body {margin: 0px; font-family: Verdana, Geneva, sans-serif;
background: white url(blackbar.gif) repeat-y top left}
#page {width: 950px}
#header {margin-bottom: 10px}
#header ul {list-style-type: none; padding: 0px; margin: -20px 0px 0px 15px}
#header li {display: inline; color: rgb(254, 232, 130);
font-size: 10px; margin: 0px 10px; padding: 0px}
#header a {color: rgb(254, 232, 130); text-decoration: none}
#header a:hover {color: rgb(211,254,106)}
#column1 {float: left; width: 125px;
list-style-type: none; font-size: 12px; padding: 10px;
margin: 0px 0px 20px 0px}
#column1 a {display: block; color: rgb(254, 232, 130); width: 100%;
text-decoration: none; margin: 10px 2px; padding: 0px}
#column1 a:hover {color: black; background-color: rgb(211,254,106)}
#column2 {float: left; margin-left: 10px}
#column2 h3 {font-size: 14px; margin: 10px 0px 0px 0px}
#column2 p {font-size: 10px; margin: 10px 0px; text-align: center}
#column3 {float: left; width: 250px; margin-left: 25px}
#column3 h3 {font-size: 18px; letter-spacing: 4px; font-weight: normal;
margin: 0px 0px 3px 0px}
#column3 p {font-size: 10px; margin: 10px 0px}
td {padding: 0px}
table {border-collapse: collapse; margin: 0px; padding: 0px}
caption {font-size: 14px; letter-spacing: 2px; margin-bottom: 3px}
thead td {vertical-align: bottom; text-align: center; width: 15px; font-size: 10px;
border-top: 1px solid black; border-left: 1px solid black;
border-right: 1px solid black}
.hanji td {border: 1px solid black}
input {width: 150px; margin-bottom: 10px}
label {margin-right: 10px}
#checkCount {text-align: right; background-color: rgb(254, 232, 130)}
table#puzzleCells {border: 1px solid red}
table#puzzleCells td {background-color: white}
table#puzzleCells td {border: 1px dotted gray; width: 15px; height: 15px}
.hanjie td.firstCol {text-align: right; width: 80px; font-size: 10px;
border-top: 1px solid black; border-bottom: 1px solid black;
border-left: 1px solid black; padding-right: 3px}
/*
New Perspectives on JavaScript, 2nd Edition
Tutorial 4
Case Problem 2
JPF Style Sheet
Filename: jpf.css
Supporting Files: left.jpg, topleft.jpg, topright.jpg
*/
body {margin: 0px; font-family: Verdana, Geneva, sans-serif;
background: white url(blackbar.gif) repeat-y top left}
#page {width: 950px}
#header {margin-bottom: 10px}
#header ul {list-style-type: none; padding: 0px; margin: -20px 0px 0px 15px}
#header li {display: inline; color: rgb(254, 232, 130);
font-size: 10px; margin: 0px 10px; padding: 0px}
#header a {color: rgb(254, 232, 130); text-decoration: none}
#header a:hover {color: rgb(211,254,106)}
#column1 {float: left; width: 125px;
list-style-type: none; font-size: 12px; padding: 10px;
margin: 0px 0px 20px 0px}
#column1 a {display: block; color: rgb(254, 232, 130); width: 100%;
text-decoration: none; margin: 10px 2px; padding: 0px}
#column1 a:hover {color: black; background-color: rgb(211,254,106)}
#column2 {float: left; margin-left: 10px}
#column2 h3 {font-size: 14px; margin: 10px 0px 0px 0px}
#column2 p {font-size: 10px; margin: 10px 0px; text-align: center}
#column3 {float: left; width: 250px; margin-left: 25px}
#column3 h3 {font-size: 18px; letter-spacing: 4px; font-weight: normal;
margin: 0px 0px 3px 0px}
#column3 p {font-size: 10px; margin: 10px 0px}
td {padding: 0px}
table {border-collapse: collapse; margin: 0px; padding: 0px}
caption {font-size: 14px; letter-spacing: 2px; margin-bottom: 3px}
thead td {vertical-align: bottom; text-align: center; width: 15px; font-size: 10px;
border-top: 1px solid black; border-left: 1px solid black;
border-right: 1px solid black}
.hanji td {border: 1px solid black}
input {width: 150px; margin-bottom: 10px}
label {margin-right: 10px}
#checkCount {text-align: right; background-color: rgb(254, 232, 130)}
table#puzzleCells {border: 1px solid red}
table#puzzleCells td {background-color: white}
table#puzzleCells td {border: 1px dotted gray; width: 15px; height: 15px}
.hanjie td.firstCol {text-align: right; width: 80px; font-size: 10px;
border-top: 1px solid black; border-bottom: 1px solid black;
border-left: 1px solid black; padding-right: 3px}
A few things.
1. where did you get
style.background.display
from???
it is
style.backgroundColor
and can be changed throughout the complete script
2. when you assign an event handler to an onclick, the handler can use the "this" keyword to get at the object the event handler was replaced on.
So the onclick=changeColor looks like this:
1. where did you get
style.background.display
from???
it is
style.backgroundColor
and can be changed throughout the complete script
2. when you assign an event handler to an onclick, the handler can use the "this" keyword to get at the object the event handler was replaced on.
So the onclick=changeColor looks like this:
function changeColor() {
this.style.backgroundColor = (this.style.backgroundColor=="black") ?"white":"black";
}
ASKER
I got the code from the textbook "New Perspectives JavaScript and AJAX 2nd Edition" I replaced the doe you suggested. I appreciate your help so much!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
That helped alot. Thank you so much, mp
ASKER
Great eye for detail. Thanks for your help! :-))
Twin
Twin
window.onload = setPuzzle; // assign the function to the event handler - note the lack of brackets
OR
window.onload=function() {
setPuzzle(); // execute function now
}
when you do
window.onload = setPuzzle();
it is executed when the statement is met, and the javascript interpreter expects a function returned from setPuzzle()