Number detection in 9x9 SUDOKU

Posted in: javascript by musiitwa joseph 2015-12-22 at 04:21:38

image for Number detection in 9x9 SUDOKU This implements the rules that followed in playing sudoku. The rules are simple.Enter digits from 1 to 9 into the blank spaces.Every row, column and 3x3 sub-section of the grid must contain only one of each digit. Each sudoku has a unique solution that can be reached logically. HTML table is used to make up the 9x9 sudoku, the table has 9 rows and 9 columns. This makes a total of 81 cells or <td>s with in the table, each has a input field that allows the user to enter one number. If the user enters any thing that is not number it is deleted immediately after checking it using isNaN() function with the keyUp event. When a correct number is entered, it is checked if there is a match (same number) in the column, row and section where that input field is.

index.html

<html>
	<head>
		<title>Sudoku 9x9</title>
		<link type="text/css" rel="stylesheet" href="styles.css"/>
	</head>
	<body bgcolor="">
		<div id="sudoku">
			<h2>SUDOKU 9x9</h2>
			<table cellpadding="0" cellspacing="0" class="border">
				<tr>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r1_c1" id="fd_s1_r1_c1" onClick=" this.select();" onKeyUp="return pressed('fd_s1_r1_c1');"/></td>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r1_c2" id="fd_s1_r1_c2" onClick=" this.select();" onKeyUp="return pressed('fd_s1_r1_c2');"/></td>
					<td class="border_right"><input autocomplete="false"  type="text" maxlength="1" class="r1_c3" id="fd_s1_r1_c3" onClick=" this.select();" onKeyUp="return pressed('fd_s1_r1_c3');"/></td>
					<td><input autocomplete="false"  type="text" maxlength="1"  class="r1_c4" id="fd_s2_r1_c4" onClick=" this.select();" onKeyUp="return pressed('fd_s2_r1_c4');"/></td>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r1_c5" id="fd_s2_r1_c5" onClick=" this.select();" onKeyUp="return pressed('fd_s2_r1_c5');"/></td>
					<td class="border_right"><input autocomplete="false"  type="text" maxlength="1" class="r1_c6" id="fd_s2_r1_c6" onClick=" this.select();" onKeyUp="return pressed('fd_s2_r1_c6');"/></td>
					<td class="border_left"><input autocomplete="false"  type="text" maxlength="1"  class="r1_c7" id="fd_s3_r1_c7" onClick=" this.select();" onKeyUp="return pressed('fd_s3_r1_c7');"/></td>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r1_c8" id="fd_s3_r1_c8" onClick=" this.select();" onKeyUp="return pressed('fd_s3_r1_c8');"/></td>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r1_c9" id="fd_s3_r1_c9" onClick=" this.select();" onKeyUp="return pressed('fd_s3_r1_c9');"/></td>
				</tr>
				<tr>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r2_c1" id="fd_s1_r2_c1" onClick=" this.select();" onKeyUp=" pressed('fd_s1_r2_c1');" /></td>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r2_c2" id="fd_s1_r2_c2" onClick=" this.select();" onKeyUp=" pressed('fd_s1_r2_c2');"/></td>
					<td class="border_right"><input autocomplete="false"  type="text" maxlength="1" class="r2_c3" id="fd_s1_r2_c3" onClick=" this.select();" onKeyUp=" pressed('fd_s1_r2_c3');"/></td>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r2_c4" id="fd_s2_r2_c4" onClick=" this.select();" onKeyUp=" pressed('fd_s2_r2_c4');"/></td>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r2_c5" id="fd_s2_r2_c5" onClick=" this.select();" onKeyUp=" pressed('fd_s2_r2_c5');"/></td>
					<td class="border_right"><input autocomplete="false"  type="text" maxlength="1" class="r2_c6" id="fd_s2_r2_c6" onClick=" this.select();" onKeyUp=" pressed('fd_s2_r2_c6');"/></td>
					<td class="border_left"><input autocomplete="false"  type="text" maxlength="1" class="r2_c7" id="fd_s3_r2_c7" onClick=" this.select();" onKeyUp=" pressed('fd_s3_r2_c7');"/></td>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r2_c8" id="fd_s3_r2_c8" onClick=" this.select();" onKeyUp=" pressed('fd_s3_r2_c8');"/></td>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r2_c9" id="fd_s3_r2_c9" onClick=" this.select();" onKeyUp=" pressed('fd_s3_r2_c9');"/></td>
				</tr>
				<tr>
					<td class="border_bottom"><input autocomplete="false"  type="text" maxlength="1" class="r3_c1" id="fd_s1_r3_c1" onClick=" this.select();" onKeyUp=" pressed('fd_s1_r3_c1');"/></td>
					<td class="border_bottom"><input autocomplete="false"  type="text" maxlength="1" class="r3_c2" id="fd_s1_r3_c2" onClick=" this.select();" onKeyUp=" pressed('fd_s1_r3_c2');"/></td>
					<td class="border_bottom border_right"><input autocomplete="false"  type="text" maxlength="1" class="r3_c3" id="fd_s1_r3_c3" onClick=" this.select();" onKeyUp=" pressed('fd_s1_r3_c3');"/></td>
					<td class="border_bottom"><input autocomplete="false"  type="text" maxlength="1" class="r3_c4" id="fd_s2_r3_c4" onClick=" this.select();" onKeyUp=" pressed('fd_s2_r3_c4');"/></td>
					<td class="border_bottom"><input autocomplete="false"  type="text" maxlength="1" class="r3_c5" id="fd_s2_r3_c5" onClick=" this.select();" onKeyUp=" pressed('fd_s2_r3_c5');"/></td>
					<td class="border_right border_bottom"><input autocomplete="false"  type="text" maxlength="1" class="r3_c6" id="fd_s2_r3_c6" onClick=" this.select();" onKeyUp=" pressed('fd_s2_r3_c6');"/></td>
					<td class="border_bottom border_left"><input autocomplete="false"  type="text" maxlength="1" class="r3_c7" id="fd_s3_r3_c7" onClick=" this.select();" onKeyUp=" pressed('fd_s3_r3_c7');"/></td>
					<td class="border_bottom"><input autocomplete="false"  type="text" maxlength="1" class="r3_c8" id="fd_s3_r3_c8" onClick=" this.select();" onKeyUp=" pressed('fd_s3_r3_c8');"/></td>
					<td class="border_bottom"><input autocomplete="false"  type="text" maxlength="1" class="r3_c9" id="fd_s3_r3_c9" onClick=" this.select();" onKeyUp=" pressed('fd_s3_r3_c9');"/></td>
				</tr>
				<tr>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r4_c1" id="fd_s4_r4_c1" onClick=" this.select();" onKeyUp=" pressed('fd_s4_r4_c1');"/></td>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r4_c2" id="fd_s4_r4_c2" onClick=" this.select();" onKeyUp=" pressed('fd_s4_r4_c2');"/></td>
					<td class="border_right"><input autocomplete="false"  type="text" maxlength="1" class="r4_c3" id="fd_s4_r4_c3" onClick=" this.select();" onKeyUp=" pressed('fd_s4_r4_c3');"/></td>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r4_c4" id="fd_s5_r4_c4" onClick=" this.select();" onKeyUp=" pressed('fd_s5_r4_c4');"/></td>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r4_c5" id="fd_s5_r4_c5" onClick=" this.select();" onKeyUp=" pressed('fd_s5_r4_c5');"/></td>
					<td class="border_right"><input autocomplete="false"  type="text" maxlength="1" class="r4_c6" id="fd_s5_r4_c6" onClick=" this.select();" onKeyUp=" pressed('fd_s5_r4_c6');"/></td>
					<td class="border_left"><input autocomplete="false"  type="text" maxlength="1" class="r4_c7" id="fd_s6_r4_c7" onClick=" this.select();" onKeyUp=" pressed('fd_s6_r4_c7');"/></td>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r4_c8" id="fd_s6_r4_c8" onClick=" this.select();" onKeyUp=" pressed('fd_s6_r4_c8');"/></td>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r4_c9" id="fd_s6_r4_c9" onClick=" this.select();" onKeyUp=" pressed('fd_s6_r4_c9');"/></td>
				</tr>
				<tr>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r5_c1" id="fd_s4_r5_c1" onClick=" this.select();" onKeyUp=" pressed('fd_s4_r5_c1');"/></td>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r5_c2" id="fd_s4_r5_c2" onClick=" this.select();" onKeyUp="pressed('fd_s4_r5_c2');"/></td>
					<td class="border_right"><input autocomplete="false"  type="text" maxlength="1" class="r5_c3" id="fd_s4_r5_c3" onClick=" this.select();" onKeyUp=" pressed('fd_s4_r5_c3');"/></td>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r5_c4" id="fd_s5_r5_c4" onClick=" this.select();" onKeyUp="pressed('fd_s5_r5_c4');"/></td>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r5_c5" id="fd_s5_r5_c5" onClick=" this.select();" onKeyUp="pressed('fd_s5_r5_c5');"/></td>
					<td class="border_right"><input autocomplete="false"  type="text" maxlength="1" class="r5_c6" id="fd_s5_r5_c6" onClick=" this.select();" onKeyUp="pressed('fd_s5_r5_c6');"/></td>
					<td class="border_left"><input autocomplete="false"  type="text" maxlength="1" class="r5_c7" id="fd_s6_r5_c7" onClick=" this.select();" onKeyUp="pressed('fd_s6_r5_c7');"/></td>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r5_c8" id="fd_s6_r5_c8" onClick=" this.select();" onKeyUp="pressed('fd_s6_r5_c8');"/></td>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r5_c9" id="fd_s6_r5_c9" onClick=" this.select();" onKeyUp="pressed('fd_s6_r5_c9');"/></td>
				</tr>
				<tr>
					<td class="border_bottom"><input autocomplete="false"  type="text" maxlength="1" class="r6_c1" id="fd_s4_r6_c1" onClick=" this.select();" onKeyUp="pressed('fd_s4_r6_c1');"/></td>
					<td class="border_bottom"><input autocomplete="false"  type="text" maxlength="1" class="r6_c2" id="fd_s4_r6_c2" onClick=" this.select();" onKeyUp="pressed('fd_s4_r6_c2');"/></td>
					<td class="border_bottom border_right"><input autocomplete="false"  type="text" maxlength="1" class="r6_c3" id="fd_s4_r6_c3" onClick=" this.select();" onKeyUp="pressed('fd_s4_r6_c3');"/></td>
					<td class="border_bottom"><input autocomplete="false"  type="text" maxlength="1" class="r6_c4" id="fd_s5_r6_c4" onClick=" this.select();" onKeyUp="pressed('fd_s5_r6_c4');"/></td>
					<td class="border_bottom"><input autocomplete="false"  type="text" maxlength="1" class="r6_c5" id="fd_s5_r6_c5" onClick=" this.select();" onKeyUp="pressed('fd_s5_r6_c5');"/></td>
					<td class="border_right border_bottom"><input autocomplete="false"  type="text" maxlength="1" class="r6_c6" id="fd_s5_r6_c6" onClick=" this.select();" onKeyUp="pressed('fd_s5_r6_c6');"/></td>
					<td class="border_bottom border_left"><input autocomplete="false"  type="text" maxlength="1" class="r6_c7" id="fd_s6_r6_c7" onClick=" this.select();" onKeyUp="pressed('fd_s6_r6_c7');"/></td>
					<td class="border_bottom"><input autocomplete="false"  type="text" maxlength="1" class="r6_c8" id="fd_s6_r6_c8" onClick=" this.select();" onKeyUp="pressed('fd_s6_r6_c8');"/></td>
					<td class="border_bottom"><input autocomplete="false"  type="text" maxlength="1" class="r6_c9" id="fd_s6_r6_c9" onClick=" this.select();" onKeyUp="pressed('fd_s6_r6_c9');"/></td>
				</tr>
				<tr>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r7_c1" id="fd_s7_r7_c1" onClick=" this.select();" onKeyUp="pressed('fd_s7_r7_c1');"/></td>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r7_c2" id="fd_s7_r7_c2" onClick=" this.select();" onKeyUp="pressed('fd_s7_r7_c2');"/></td>
					<td class="border_right"><input autocomplete="false"  type="text" maxlength="1" class="r7_c3" id="fd_s7_r7_c3" onClick=" this.select();" onKeyUp="pressed('fd_s7_r7_c3');"/></td>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r7_c4" id="fd_s8_r7_c4" onClick=" this.select();" onKeyUp="pressed('fd_s8_r7_c4');"/></td>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r7_c5" id="fd_s8_r7_c5" onClick=" this.select();" onKeyUp="pressed('fd_s8_r7_c5');"/></td>
					<td class="border_right"><input autocomplete="false"  type="text" maxlength="1" class="r7_c6" id="fd_s8_r7_c6" onClick=" this.select();" onKeyUp="pressed('fd_s8_r7_c6');"/></td>
					<td class="border_left"><input autocomplete="false"  type="text" maxlength="1" class="r7_c7" id="fd_s9_r7_c7" onClick=" this.select();" onKeyUp="pressed('fd_s9_r7_c7');"/></td>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r7_c8" id="fd_s9_r7_c8" onClick=" this.select();" onKeyUp="pressed('fd_s9_r7_c8');"/></td>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r7_c9" id="fd_s9_r7_c9" onClick=" this.select();" onKeyUp="pressed('fd_s9_r7_c9');"/></td>
				</tr>
				<tr>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r8_c1" id="fd_s7_r8_c1" onClick=" this.select();" onKeyUp="pressed('fd_s7_r8_c1');"/></td>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r8_c2" id="fd_s7_r8_c2" onClick=" this.select();" onKeyUp="pressed('fd_s7_r8_c2');"/></td>
					<td class="border_right"><input autocomplete="false"  type="text" maxlength="1" class="r8_c3" id="fd_s7_r8_c3" onClick=" this.select();" onKeyUp="pressed('fd_s7_r8_c3');"/></td>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r8_c4" id="fd_s8_r8_c4" onClick=" this.select();" onKeyUp="pressed('fd_s8_r8_c4');"/></td>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r8_c5" id="fd_s8_r8_c5" onClick=" this.select();" onKeyUp="pressed('fd_s8_r8_c5');"/></td>
					<td class="border_right"><input autocomplete="false"  type="text" maxlength="1" class="r8_c6" id="fd_s8_r8_c6" onClick=" this.select();" onKeyUp="pressed('fd_s8_r8_c6');"/></td>
					<td class="border_left"><input autocomplete="false"  type="text" maxlength="1" class="r8_c7" id="fd_s9_r8_c7" onClick=" this.select();" onKeyUp="pressed('fd_s9_r8_c7');"/></td>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r8_c8" id="fd_s9_r8_c8" onClick=" this.select();" onKeyUp="pressed('fd_s9_r8_c8');"/></td>
					<td><input autocomplete="false"  type="text" maxlength="1" class="r8_c9" id="fd_s9_r8_c9" onClick=" this.select();" onKeyUp="pressed('fd_s9_r8_c9');"/></td>
				</tr>
				<tr>
					<td class=""><input autocomplete="false"  type="text" maxlength="1" class="r9_c1" id="fd_s7_r9_c1" onClick=" this.select();" onKeyUp="pressed('fd_s7_r9_c1');"/></td>
					<td class=""><input autocomplete="false"  type="text" maxlength="1" class="r9_c2" id="fd_s7_r9_c2" onClick=" this.select();" onKeyUp="pressed('fd_s7_r9_c2');"/></td>
					<td class=" border_right"><input autocomplete="false"  type="text" maxlength="1" class="r9_c3" id="fd_s7_r9_c3" onClick=" this.select();" onKeyUp="pressed('fd_s7_r9_c3');"/></td>
					<td class=""><input autocomplete="false"  type="text" maxlength="1" class="r9_c4" id="fd_s8_r9_c4" onClick=" this.select();" onKeyUp="pressed('fd_s8_r9_c4');"/></td>
					<td class=""><input autocomplete="false"  type="text" maxlength="1" class="r9_c5" id="fd_s8_r9_c5" onClick=" this.select();" onKeyUp="pressed('fd_s8_r9_c5');"/></td>
					<td class="border_right "><input autocomplete="false"  type="text" maxlength="1" class="r9_c6" id="fd_s8_r9_c6" onClick=" this.select(); " onKeyUp="pressed('fd_s8_r9_c6');"/></td>
					<td class=" border_left"><input autocomplete="false"  type="text" maxlength="1" class="r9_c7" id="fd_s9_r9_c7" onClick=" this.select();" onKeyUp="pressed('fd_s9_r9_c7');"/></td>
					<td class=""><input autocomplete="false"  type="text" maxlength="1" class="r9_c8" id="fd_s9_r9_c8" onClick=" this.select();" onKeyUp="pressed('fd_s9_r9_c8');"/></td>
					<td class=""><input autocomplete="false"  type="text" maxlength="1" class="r9_c9" id="fd_s9_r9_c9" onClick=" this.select();" onKeyUp="pressed('fd_s9_r9_c9');"/></td>
				</tr>
			</table>
			<div id="message"></div>
			<div id="message1"></div>
		</div>		
		<footer>
			<div style="text-align:center">
				Tutorial by <b>Code eagles</b>. You can get more at <a href="http://www.codeeagles.com" target="_blank">www.codeeagles.com</a>
			</div>
		</footer>
		<script type="text/javascript">
			/*
			The 9x9 sudoku has 9 rows. Fill in the numbers of each  row in its array position
			*/
			
			var puzzle = [
							["", "","3", "", "", "", "", "7", ""], 		//row1
							["", "9","", "", "", "", "1", "", ""], 		//row2
							["", "","5", "", "", "", "", "", ""], 		//row3
							["", "","", "", "6", "5", "9", "", "3"],	//row4
							["", "","7", "", "9", "", "", "6", "8"],	//row5
							["", "","", "", "4", "", "2", "1", ""],		//row6
							["4", "","", "2", "7", "", "", "", ""],		//row7
							["6", "","9", "", "", "8", "", "", "2"],	//row8
							["", "","2", "3", "1", "", "", "", "9"]		//row9
						];
			
			
							
		</script>
		<script type="text/javascript" src="javascript.js"></script>
	</body>
</html>

javascript.js

//__________________________________________SUDOKU (9x9)_____________________________________
function __(x){
	return document.getElementById(x);
}

for(i=1; i<=9; i++){
	for(j=1; j<=9; j++){
		var setValue = document.getElementsByClassName("r"+i+"_c"+j)[0];
		setValue.value = puzzle[i-1][j-1];
		if(setValue.value != ""){
			setValue.className = "disabled";
			setValue.disabled = "true";
		}
	}
}

function pressed(id){
    var i,j,messageVar="", right = "", error = "";
    var rows = ['r1','r2','r3','r4','r5','r6','r7','r8','r9'];	
    var cols = ['c1','c2','c3','c4','c5','c6','c7','c8','c9'];	
    var sum_cols = [0,0,0,0,0,0,0,0,0], sum_rows = [0,0,0,0,0,0,0,0,0];

    var field = [
        'fd_s1_r1_c1','fd_s1_r1_c2','fd_s1_r1_c3','fd_s2_r1_c4','fd_s2_r1_c5','fd_s2_r1_c6','fd_s3_r1_c7','fd_s3_r1_c8','fd_s3_r1_c9',
        'fd_s1_r2_c1','fd_s1_r2_c2','fd_s1_r2_c3','fd_s2_r2_c4','fd_s2_r2_c5','fd_s2_r2_c6','fd_s3_r2_c7','fd_s3_r2_c8','fd_s3_r2_c9',
        'fd_s1_r3_c1','fd_s1_r3_c2','fd_s1_r3_c3','fd_s2_r3_c4','fd_s2_r3_c5','fd_s2_r3_c6','fd_s3_r3_c7','fd_s3_r3_c8','fd_s3_r3_c9',
        'fd_s4_r4_c1','fd_s4_r4_c2','fd_s4_r4_c3','fd_s5_r4_c4','fd_s5_r4_c5','fd_s5_r4_c6','fd_s6_r4_c7','fd_s6_r4_c8','fd_s6_r4_c9',
        'fd_s4_r5_c1','fd_s4_r5_c2','fd_s4_r5_c3','fd_s5_r5_c4','fd_s5_r5_c5','fd_s5_r5_c6','fd_s6_r5_c7','fd_s6_r5_c8','fd_s6_r5_c9',
        'fd_s4_r6_c1','fd_s4_r6_c2','fd_s4_r6_c3','fd_s5_r6_c4','fd_s5_r6_c5','fd_s5_r6_c6','fd_s6_r6_c7','fd_s6_r6_c8','fd_s6_r6_c9',
        'fd_s7_r7_c1','fd_s7_r7_c2','fd_s7_r7_c3','fd_s8_r7_c4','fd_s8_r7_c5','fd_s8_r7_c6','fd_s9_r7_c7','fd_s9_r7_c8','fd_s9_r7_c9',
        'fd_s7_r8_c1','fd_s7_r8_c2','fd_s7_r8_c3','fd_s8_r8_c4','fd_s8_r8_c5','fd_s8_r8_c6','fd_s9_r8_c7','fd_s9_r8_c8','fd_s9_r8_c9',
        'fd_s7_r9_c1','fd_s7_r9_c2','fd_s7_r9_c3','fd_s8_r9_c4','fd_s8_r9_c5','fd_s8_r9_c6','fd_s9_r9_c7','fd_s9_r9_c8','fd_s9_r9_c9'
    ];

    (isNaN(__(id).value)||__(id).value==0)? __(id).value = "":1;


    var id_splitted =  id.split('_');

    for(i=0;i<81;i++){

        /*
		* Checking if no section has the number as the one that has been entered
		*/
		if((field[i].indexOf(id_splitted[1])) != -1){
            if(field[i] != id && __(field[i]).value != ""){
                if((__(id).value == __(field[i]).value)){                    
                    messageVar += __(id).value+" should not be in that section
"; } } } /* * Checking if no row has the number as the one that has been entered */ if(field[i].indexOf(id_splitted[2])!= -1){ if((__(id).value == __(field[i]).value)&& field[i] != id && __(field[i]).value != ""){ messageVar += __(id).value+" should not be in that row
"; } } /* * Checking if no column has the number as the one that has been entered */ if(field[i].indexOf(id_splitted[3])!= -1){ if((__(id).value == __(field[i]).value)&& field[i] != id && __(field[i]).value != ""){ messageVar += __(id).value+" should not be in that column
"; } } if(__(field[i]).value != ""){ for (j = 0; j < 9; j++){ //summing all columns if(field[i].indexOf(cols[j])!= -1){ sum_cols[j] = parseInt(sum_cols[j])+ parseInt( __(field[i]).value); } //summing all rows if(field[i].indexOf(rows[j])!= -1){ sum_rows[j] = parseInt(sum_rows[j])+ parseInt( __(field[i]).value); } } } } if(messageVar == ""){ __('message').innerHTML = ""; __(id).style.color = "blue"; __(id).style.fontWeight = "normal"; __(id).style.backgroundColor = "#FFF"; }else{ __('message').innerHTML = messageVar; __(id).style.color = "red"; __(id).style.fontWeight = "bold"; __(id).style.backgroundColor = "#FEDEDA"; } /* * Checking if all rows and columns are right */ for(j=0;j<9;j++){ if(sum_rows[j] == 45 && sum_cols[j] == 45){ //every row or column has 1-9. Adding 1+2+3+4+5+6+7+8+9 = 45 right = "yes"; __('message1').innerHTML = ""; }else{ right = "no"; break; } } /* * If all cells are right, change the background color and the color */ if(right == "yes" && messageVar == ""){ __('message1').innerHTML = "Correct"; __('message').innerHTML = ""; for(j=0; j<81; j++){ __(field[j]).style.backgroundColor = "#008000"; __(field[j]).style.color = "#FFFFFF"; } } }

styles.css

#sudoku{
    width: 25%;
    margin: 10px auto;
}
#sudoku .border{
    border: 3px solid #000 !important;
}
#sudoku table tr td{
    border: 1px solid #000;
    width: 40px;
    height: 40px;
    text-align: center;
}
#sudoku table tr td input{
    border: none;
    width: 38px;
    height: 38px;
    text-align: center;
    color: darkblue;
}
#sudoku .disabled{
    background-color: #FFF;
    color:#000 !important;
    font-weight: bold;
}
#sudoku table tr td input:hover, #sudoku table tr td input:focus{
    background-color: whitesmoke;
}
#sudoku table .border_top{
    border-top: 3px solid #000;
}
#sudoku table .border_bottom{
    border-bottom: 3px solid #000;
}
#sudoku table .border_left{
    border-left: 3px solid #000;
}
#sudoku table .border_right{
    border-right: 3px solid #000;
}
#sudoku #message{
	margin:10px auto;
	background-color:red;
}
#sudoku #message1{
	margin:10px auto;
    background-color: lawngreen;
}
Tags:
css
html

Search

Comments(11)


http://levitrageneric-cheapest-price.net/ - levitr...Read morehttp://levitrageneric-cheapest-price.net/ - levitrageneric-cheapest-price.net.ankor cheapest-priceventolinonline.net.ankor http://levitra-online-cheap.net/
less

from: udeuyoobijo at: 2017-11-08 , 11:17:07 PM

http://levitrageneric-cheapest-price.net/ - levitr...Read morehttp://levitrageneric-cheapest-price.net/ - levitrageneric-cheapest-price.net.ankor cheapest-priceventolinonline.net.ankor http://levitra-online-cheap.net/
less

from: abuvurupahah at: 2017-11-08 , 11:20:16 PM

http://levitrageneric-cheapest-price.net/ - levitr...Read morehttp://levitrageneric-cheapest-price.net/ - levitrageneric-cheapest-price.net.ankor cheapest-priceventolinonline.net.ankor http://levitra-online-cheap.net/
less

from: akegikuh at: 2017-11-08 , 11:31:41 PM

Show more comments
http://levitrageneric-cheapest-price.net/ - levitr...Read morehttp://levitrageneric-cheapest-price.net/ - levitrageneric-cheapest-price.net.ankor cheapest-priceventolinonline.net.ankor http://levitra-online-cheap.net/
less

from: apesapuj at: 2017-11-08 , 11:31:46 PM

http://levitrageneric-cheapest-price.net/ - levitr...Read morehttp://levitrageneric-cheapest-price.net/ - levitrageneric-cheapest-price.net.ankor cheapest-priceventolinonline.net.ankor http://levitra-online-cheap.net/
less

from: oqaheqruz at: 2017-11-08 , 11:34:00 PM

http://levitrageneric-cheapest-price.net/ - levitr...Read morehttp://levitrageneric-cheapest-price.net/ - levitrageneric-cheapest-price.net.ankor cheapest-priceventolinonline.net.ankor http://levitra-online-cheap.net/
less

from: uzeikuputoqu at: 2017-11-08 , 11:35:26 PM

http://levitrageneric-cheapest-price.net/ - levitr...Read morehttp://levitrageneric-cheapest-price.net/ - levitrageneric-cheapest-price.net.ankor cheapest-priceventolinonline.net.ankor http://levitra-online-cheap.net/
less

from: ipeuukoz at: 2017-11-08 , 11:48:35 PM

http://levitrageneric-cheapest-price.net/ - levitr...Read morehttp://levitrageneric-cheapest-price.net/ - levitrageneric-cheapest-price.net.ankor cheapest-priceventolinonline.net.ankor http://levitra-online-cheap.net/
less

from: oyazoyuafa at: 2017-11-08 , 11:49:20 PM

http://levitrageneric-cheapest-price.net/ - levitr...Read morehttp://levitrageneric-cheapest-price.net/ - levitrageneric-cheapest-price.net.ankor cheapest-priceventolinonline.net.ankor http://levitra-online-cheap.net/
less

from: eheejujosem at: 2017-11-09 , 02:24:40 PM

http://levitrageneric-cheapest-price.net/ - levitr...Read morehttp://levitrageneric-cheapest-price.net/ - levitrageneric-cheapest-price.net.ankor cheapest-priceventolinonline.net.ankor http://levitra-online-cheap.net/
less

from: areburoda at: 2017-11-09 , 10:46:57 PM

http://levitrageneric-cheapest-price.net/ - levitr...Read morehttp://levitrageneric-cheapest-price.net/ - levitrageneric-cheapest-price.net.ankor cheapest-priceventolinonline.net.ankor http://levitra-online-cheap.net/
less

from: edcugaleliji at: 2017-11-09 , 10:59:58 PM

Back

Leave a comment

Fields with * are required
Your email address will not be displayed
4 + 2 =