Changed <select> elements to links.

This guarantees accurate event handling.

Author: intrepidcoder

Sudoku.css

@@ -69,6 +69,13 @@ a:active {
 	cursor: help;
 }
 
+#guessing_tools_table {
+	border-width: 0px;
+	border-spacing: 0px;
+	margin: 10px 0px 10px 40px;
+	padding: 0px;
+}
+
 .cell {
 	border-bottom-style: none;
 	border-color: black;
@@ -154,6 +161,10 @@ a:active {
 	padding: 1px 4px;
 }
 
+.blank_cell_highlight_black input {
+	color: black;
+}
+
 .blank_cell_highlight_red input {
 	color: red;
 }

Sudoku.js

@@ -388,15 +388,16 @@ function setBlankCells(color) {
 		}
 
 	}
-
+	
+	// Highlight selected link.
+	document.getElementById("mark_blank_cells_" + cells.blankCellColor).style.backgroundColor = "";
+	document.getElementById("mark_blank_cells_" + color).style.backgroundColor = "#FF8";
+	
 	cells.blankCellColor = color;
 }
 
-function deleteColoredCells(element) {
-	var color = element.value.toLowerCase();
-	element.value = "Select Color";
-
-	if (color === "select color" || !confirm("Are you sure you want to delete all cells marked " + color + "?")) {
+function deleteColoredCells(color) {
+	if (!confirm("Are you sure you want to delete all cells marked " + color + "?")) {
 		return;
 	}
 
@@ -405,10 +406,6 @@ function deleteColoredCells(element) {
 	for (var i = 0; i < 81; i++) {
 		currentCell = cells[i];
 
-		// if (currentCell.value !== 0) {
-			// console.log(currentCell.element.classList.contains("blank_cell_highlight_" + color));
-		// }
-
 		if (currentCell.value !== 0 && currentCell.element.classList.contains("blank_cell_highlight_" + color)) {
 			currentCell.element.firstChild.value = "";
 			currentCell.setValue(0);

index.html

@@ -77,7 +77,7 @@
 				</ul>
 
 				<div class="small_header">Guessing tools:</div>
-				<ul>
+<!-- 				<ul>
 					<li>
 						Mark blank cells:
 						<select title="Mark all blank cells a unique color so they can be deleted easily. This is useful for making guesses." onchange="this.style.color = this.value.toLowerCase(); setBlankCells(this.value.toLowerCase());">
@@ -98,7 +98,26 @@
 							<option style="color: purple;">Purple</option>
 						</select>
 					</li>
-				</ul>
+				</ul> -->
+				<table id="guessing_tools_table">
+					<tbody>
+						<tr>
+							<td>Mark blank cells:</td>
+							<td><a href="javascript:void(0);" onclick="setBlankCells('black');" style="color: black; background-color: #FF8;" id="mark_blank_cells_black" title="Mark all blank cells black so they can be deleted easily. This is useful for making guesses.">Black</a></td>
+							<td><a href="javascript:void(0);" onclick="setBlankCells('blue');" style="color: blue;" id="mark_blank_cells_blue" title="Mark all blank cells blue so they can be deleted easily. This is useful for making guesses.">Blue</a></td>
+							<td><a href="javascript:void(0);" onclick="setBlankCells('red');" style="color: red;" id="mark_blank_cells_red" title="Mark all blank cells red so they can be deleted easily. This is useful for making guesses.">Red</a></td>
+							<td><a href="javascript:void(0);" onclick="setBlankCells('green');" style="color: green;" id="mark_blank_cells_green" title="Mark all blank cells green so they can be deleted easily. This is useful for making guesses.">Green</a></td>
+							<td><a href="javascript:void(0);" onclick="setBlankCells('purple');" style="color: purple;" id="mark_blank_cells_purple" title="Mark all blank cells purple so they can be deleted easily. This is useful for making guesses.">Purple</a></td>
+						</tr><tr>
+							<td>Delete cells marked:</td>
+							<td><a href="javascript:void(0);" onclick="deleteColoredCells('black');" style="color: black;" title="Delete all cells marked black.">Black</a></td>
+							<td><a href="javascript:void(0);" onclick="deleteColoredCells('blue');" style="color: blue;" title="Delete all cells marked blue.">Blue</a></td>
+							<td><a href="javascript:void(0);" onclick="deleteColoredCells('red');" style="color: red;" title="Delete all cells marked red.">Red</a></td>
+							<td><a href="javascript:void(0);" onclick="deleteColoredCells('green');" style="color: green;" title="Delete all cells marked green.">Green</a></td>
+							<td><a href="javascript:void(0);" onclick="deleteColoredCells('purple');" style="color: purple;" title="Delete all cells marked purple.">Purple</a></td>
+						</tr>
+					</tbody>
+				</table>
 
 				<div class="small_header">Solution/Hints:</div>
 				<ul>