Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1545
  • Last Modified:

Help with Javascript code

I'm trying to write a code for a hinjie puzzle for school but can't get it to work.  Don't know what's wrong.  Help Please!

 
<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

   <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">
   	window.onload = setPuzzle;
	
	var allCells = new array();
	
	function setPuzzle() {
		var puzzleTable = document.getElementByID("puzzleCells");
		allCells = document.getElementByTagName("td");
		for (var i =0; i < allCells.length; i++) {
			document.allCells[i].style.backgroundcolor = "white";
			allCells[i].onclick = changeColor;
		}
		document.getElementById("solution").onclick = showSolution;
		document.getElementById("hide").onclick = hideSolution;
		document.getElementById("solution").onclick = showSolution;
		document.getElementById("check").onclick = checkSolution;
		document.getElementById("uncheck").onclick = uncheckSolution;	
	
	}

	function changeColor() {
		this.style.backgroundColor  = (this.style.backgroundColor=="black") ?"white":"black";

	}

	function showSolution() {

		for (var i = 0; i< allCells.length; i ++) {
			if (allCells[i].className == "dark") {
			allCells[i].style.backgroundColor = "black";
			}else{	   
				allCells[i].style.backgroundColor = "white";
			}
	 
	 checkCount = "0";
	 }
}

function hideSolution() {

	for (var i = 0; i< allCells.length; i ++) {
		allCells[i].style.backgroundColor= "white";
		}
	checkCount = " ";
}

function checkSolution() {
	var checkCount = 0;
	
	for (var i = 0; i< allCells.length; i ++) {
		if (allCells[i].className == "dark" && allCells[i].style.backgroundColor == "black") {
		allCells[i].style.backgroundColor = "red";
		} else if (allCells[i].className == "dark" && allCells[i].style.backgroundColor == "white"){
		checkCount ++;
		}
		return checkCount.value;
	}
	
}

function uncheckSolution() {

	for (var i = 0; i< allCells.length; i ++) {
		if (allCells[i].style.backgroundColor == "red") {
		allCells[i].style.backgroundColor = "black";
		}
	checkCount = " ";
	}
}
	
   
   
   </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>

Open in new window

0
Killahb101
Asked:
Killahb101
  • 6
  • 5
  • 2
1 Solution
 
Gurvinder Pal SinghCommented:
when you say <<can't get it to work>>, what do you mean?
0
 
sjklein42Commented:
For starters, on line 18, "array" needs to be "Array" - case sensitive

0
 
Gurvinder Pal SinghCommented:
actually, line 18 is
var puzzleTable = document.getElementByID("puzzleCells");

which also need to be case-sensitive,
var puzzleTable = document.getElementById("puzzleCells");
http://www.w3schools.com/jsref/met_doc_getelementbyid.asp
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
sjklein42Commented:
And two lines later, getElementByID needs to be getElementById
0
 
sjklein42Commented:
getElementByTagName should be getElementsByTagName

Do you want me to keep going?
0
 
Killahb101Author Commented:
Thanks for the help I corrected all of my typos and it's working but still have some problems.  My checkSolution function and uncheckSolution function aren't working.  can you take a look at those two function and see if something is wrong with them.  I,ll redo the corrected code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 4
   Case Problem 2

   Hanjie Puzzle
   Author: 	
   Date:   February 15, 2011

   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 src="puzzle.js" type="text/javascript"></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>


/*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 4
   Case Problem 2

   Author:    
   Date:      February 15, 2011

   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 = document.getElementsByTagName("td");
		for (var i =0; i < allCells.length; i++) {
			allCells[i].style.backgroundColor = "white";
			allCells[i].onclick = changeColor;
		}
		document.getElementById("solution").onclick = showSolution;
		document.getElementById("hide").onclick = hideSolution;
		document.getElementById("solution").onclick = showSolution;
		document.getElementById("check").onclick = checkSolution;
		document.getElementById("uncheck").onclick = uncheckSolution;	
	
	}

	function changeColor() {
		this.style.backgroundColor  = (this.style.backgroundColor=="black") ?"white":"black";

	}

	function showSolution() {

		for (var i = 0; i< allCells.length; i++) {
			if (allCells[i].className == "dark") {
			allCells[i].style.backgroundColor = "black";
			}else{	   
				allCells[i].style.backgroundColor = "white";
			}
	 
	 checkCount = "0";
	 }
}

function hideSolution() {

	for (var i = 0; i< allCells.length; i++) {
		allCells[i].style.backgroundColor = "white";
		}
	checkCount = " ";
}

function checkSolution() {
	var checkCount = 0;
	
	for (var i = 0; i< allCells.length; i++) {
		if (allCells[i].style.backgroundColor == "black" && allCells[i].className != "dark") {
		allCells[i].style.backgroundColor = "red";
		} else if (allCells[i].className == "dark" && allCells[i].style.backgroundColor == "white"){
		checkCount++;
		}
		return checkCount.value;
	}
	
}

function uncheckSolution() {

	for (var i = 0; i< allCells.length; i++) {
		if (allCells[i].style.backgroundColor == "red") {
		allCells[i].style.backgroundColor = "black";
		}
	checkCount.value = " ";
	}
}

Open in new window

0
 
Killahb101Author Commented:
This is what the two functions suppose to do but aren't doing anything when I clicked the buttons.

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 Check Solution button. The page will highlight incorrectly-marked cells in red and display the number of cells that still need to be marked. The uncheckSolution function suppose to undo the chekSolution function

0
 
sjklein42Commented:
Everything after your </html> tag is being ignored.

You need a <script> block.

This should get you a little further.  At least the functions are being called.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 4
   Case Problem 2

   Hanjie Puzzle
   Author: 	
   Date:   February 15, 2011

   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 src="puzzle.js" type="text/javascript"></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>

<script>
/*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 4
   Case Problem 2

   Author:    
   Date:      February 15, 2011

   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 = document.getElementsByTagName("td");
		for (var i =0; i < allCells.length; i++) {
			allCells[i].style.backgroundColor = "white";
			allCells[i].onclick = changeColor;
		}
		document.getElementById("solution").onclick = showSolution;
		document.getElementById("hide").onclick = hideSolution;
		document.getElementById("solution").onclick = showSolution;
		document.getElementById("check").onClick = checkSolution;
		document.getElementById("uncheck").onclick = uncheckSolution;	
	
	}

	function changeColor() {
		this.style.backgroundColor  = (this.style.backgroundColor=="black") ?"white":"black";

	}

	function showSolution() {

		for (var i = 0; i< allCells.length; i++) {
			if (allCells[i].className == "dark") {
			allCells[i].style.backgroundColor = "black";
			}else{	   
				allCells[i].style.backgroundColor = "white";
			}
	 
	 checkCount = "0";
	 }
}

function hideSolution() {

	for (var i = 0; i< allCells.length; i++) {
		allCells[i].style.backgroundColor = "white";
		}
	checkCount = " ";
}

function checkSolution() {
	var checkCount = 0;
	
	for (var i = 0; i< allCells.length; i++) {
		if (allCells[i].style.backgroundColor == "black" && allCells[i].className != "dark") {
		allCells[i].style.backgroundColor = "red";
		} else if (allCells[i].className == "dark" && allCells[i].style.backgroundColor == "white"){
		checkCount++;
		}
		return checkCount.value;
	}
	
}

function uncheckSolution() {

	for (var i = 0; i< allCells.length; i++) {
		if (allCells[i].style.backgroundColor == "red") {
		allCells[i].style.backgroundColor = "black";
		}
	checkCount.value = " ";
	}
}
</script>
</body>

</html>

Open in new window

0
 
sjklein42Commented:
Fixed a typo (my fault):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 4
   Case Problem 2

   Hanjie Puzzle
   Author: 	
   Date:   February 15, 2011

   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 src="puzzle.js" type="text/javascript"></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>

<script>
/*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 4
   Case Problem 2

   Author:    
   Date:      February 15, 2011

   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 = document.getElementsByTagName("td");
		for (var i =0; i < allCells.length; i++) {
			allCells[i].style.backgroundColor = "white";
			allCells[i].onclick = changeColor;
		}
		document.getElementById("solution").onclick = showSolution;
		document.getElementById("hide").onclick = hideSolution;
		document.getElementById("solution").onclick = showSolution;
		document.getElementById("check").onclick = checkSolution;
		document.getElementById("uncheck").onclick = uncheckSolution;	
	
	}

	function changeColor() {
		this.style.backgroundColor  = (this.style.backgroundColor=="black") ?"white":"black";

	}

	function showSolution() {

		for (var i = 0; i< allCells.length; i++) {
			if (allCells[i].className == "dark") {
			allCells[i].style.backgroundColor = "black";
			}else{	   
				allCells[i].style.backgroundColor = "white";
			}
	 
	 checkCount = "0";
	 }
}

function hideSolution() {

	for (var i = 0; i< allCells.length; i++) {
		allCells[i].style.backgroundColor = "white";
		}
	checkCount = " ";
}

function checkSolution() {
	var checkCount = 0;
	
	for (var i = 0; i< allCells.length; i++) {
		if (allCells[i].style.backgroundColor == "black" && allCells[i].className != "dark") {
		allCells[i].style.backgroundColor = "red";
		} else if (allCells[i].className == "dark" && allCells[i].style.backgroundColor == "white"){
		checkCount++;
		}
		return checkCount.value;
	}
	
}

function uncheckSolution() {

	for (var i = 0; i< allCells.length; i++) {
		if (allCells[i].style.backgroundColor == "red") {
		allCells[i].style.backgroundColor = "black";
		}
	checkCount.value = " ";
	}
}
</script>
</body>

</html>

Open in new window

0
 
Killahb101Author Commented:
Any more suggestions?  
0
 
sjklein42Commented:
Line 550 and 561 - checkCount is a scalar - you don't need to add .value.

All four buttons will then work but I don't know if they are doing what they are supposed to.

Getting there!

Also you need to predeclare checkCount (var checkCount; ) anywhere near the top of the <script> block.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 4
   Case Problem 2

   Hanjie Puzzle
   Author: 	
   Date:   February 15, 2011

   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 src="puzzle.js" type="text/javascript"></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>

<script>
/*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 4
   Case Problem 2

   Author:    
   Date:      February 15, 2011

   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();
	var checkCount;

	function setPuzzle() {
		var puzzleTable = document.getElementById("puzzleCells");
		allCells = document.getElementsByTagName("td");
		for (var i =0; i < allCells.length; i++) {
			allCells[i].style.backgroundColor = "white";
			allCells[i].onclick = changeColor;
		}
		document.getElementById("solution").onclick = showSolution;
		document.getElementById("hide").onclick = hideSolution;
		document.getElementById("solution").onclick = showSolution;
		document.getElementById("check").onclick = checkSolution;
		document.getElementById("uncheck").onclick = uncheckSolution;	
	
	}

	function changeColor() {
		this.style.backgroundColor  = (this.style.backgroundColor=="black") ?"white":"black";

	}

	function showSolution() {

		for (var i = 0; i< allCells.length; i++) {
			if (allCells[i].className == "dark") {
			allCells[i].style.backgroundColor = "black";
			}else{	   
				allCells[i].style.backgroundColor = "white";
			}
	 
	 checkCount = "0";
	 }
}

function hideSolution() {

	for (var i = 0; i< allCells.length; i++) {
		allCells[i].style.backgroundColor = "white";
		}
	checkCount = " ";
}

function checkSolution() {
	var checkCount = 0;
	
	for (var i = 0; i< allCells.length; i++) {
		if (allCells[i].style.backgroundColor == "black" && allCells[i].className != "dark") {
		allCells[i].style.backgroundColor = "red";
		} else if (allCells[i].className == "dark" && allCells[i].style.backgroundColor == "white"){
		checkCount++;
		}
		return checkCount;
	}
	
}

function uncheckSolution() {
	for (var i = 0; i< allCells.length; i++) {
		if (allCells[i].style.backgroundColor == "red") {
		allCells[i].style.backgroundColor = "black";
		}
	checkCount = " ";
	}
}
</script>
</body>

</html>

Open in new window

0
 
Killahb101Author Commented:
got help from someone else
0
 
Killahb101Author Commented:
sjKlien42 was great and helped me with all my problems, his subjection's were great and really helped me  
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now