RSS FeedsUsing a SPAN Tag as an Text input area?
Hi guys I hope you guys can help me. I have an assignment that I have to hand in on Tuesday 11 May which is a sudoku game in javascript. I am given the startboard solution and the final solution of 3 difficulty levels (easy, medium, hard). I need to be able to load both the startboard and final solution at the same time and then be able to input numbers in the sudoku cells, and when a 0 is typed the cell content is emptied. Also i need to be able to check the cell that is selected and check it against the solution and display a message if it is correct or not. I am not using a conventional table as most would be using but im using a sudoku grid that is manipulated by css. I have managed to be able to output the initial startboard but cannot find a way of inputing a number because my table is made out of divs that have 2spans, and i have been wondering how to be able to manipulate the span tags in order to use them as input area. The following is my 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" xml:lang="en" lang="en">
<head>
<title>Your title here</title>
<link rel="stylesheet" type="text/css" href="960.css" />
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="text.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="sudoku.js">
// JavaScript Document
window.onload = loadEasy;
// define the global variables used to represent the board state, size etc.
var startboard; //initial board
var solution;//Sudoku solution board
var boardsize = 9; //number of cells
// Output the numbers of the selected Level to the cells and hide the 0’s
function displayvalues ()
{
for (var rowloop = 0; rowloop < boardsize; rowloop++) {
for (var columnloop = 0; columnloop < boardsize; columnloop++){
var cell = document.getElementById(’square_’ + rowloop + ‘_’ + columnloop);
cell.value = startboard[rowloop][columnloop];
cell.innerHTML= cell.value;
if (cell.value == 0) {
cell.innerHTML = "";
}
}
}
}
// define the starting and solution board values for the "easy" level
function loadEasy()
{
startboard = [[0, 4, 6, 2, 8, 0, 0, 0, 0],
[5, 0, 0, 6, 0, 0, 7, 4, 0],
[2, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 5, 0, 3, 2, 0, 7, 0],
[0, 2, 1, 0, 0, 0, 4, 8, 0],
[0, 3, 0, 1, 7, 0, 5, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 5],
[0, 9, 4, 0, 0, 1, 0, 0, 7],
[0, 0, 0, 0, 9, 6, 8, 3, 0]]
solution = [[9, 4, 6, 2, 8, 7, 3, 5, 1],
[5, 8, 3, 6, 1, 9, 7, 4, 2],
[2, 1, 7, 5, 4, 3, 6, 9, 8],
[8, 6, 5, 4, 3, 2, 1, 7, 9],
[7, 2, 1, 9, 6, 5, 4, 8, 3],
[4, 3, 9, 1, 7, 8, 5, 2, 6],
[6, 7, 8, 3, 2, 4, 9, 1, 5],
[3, 9, 4, 8, 5, 1, 2, 6, 7],
[1, 5, 2, 7, 9, 6, 8, 3, 4]]
displayvalues();
}
// define the starting and solution board values for the "normal" level
function loadNormal()
{
startboard = [[0, 0, 0, 8, 0, 0, 0, 1, 7],
[4, 3, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 2, 0, 0, 0, 9, 0, 0],
[2, 0, 0, 0, 0, 8, 0, 0, 0],
[0, 9, 7, 6, 0, 3, 4, 8, 0],
[0, 0, 0, 7, 0, 0, 0, 0, 5],
[0, 0, 6, 0, 0, 0, 1, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 4, 8],
[5, 8, 0, 0, 0, 1, 0, 0, 0]]
solution = [[6, 5, 9, 8, 2, 4, 3, 1, 7],
[4, 3, 1, 5, 9, 7, 8, 2, 6],
[8, 7, 2, 1, 3, 6, 9, 5, 4],
[2, 6, 5, 9, 4, 8, 7, 3, 1],
[1, 9, 7, 6, 5, 3, 4, 8, 2],
[3, 4, 8, 7, 1, 2, 6, 9, 5],
[9, 2, 6, 4, 8, 5, 1, 7, 3],
[7, 1, 3, 2, 6, 9, 5, 4, 8],
[5, 8, 4, 3, 7, 1, 2, 6, 9]]
displayvalues();
}
// define the starting and solution board values for the "hard" level
function loadHard()
{
startboard = [[9, 0, 0, 0, 0, 1, 0, 5, 0],
[7, 6, 5, 0, 0, 0, 0, 0, 0],
[1, 0, 0, 3, 0, 0, 0, 0, 8],
[0, 0, 0, 0, 0, 6, 0, 4, 0],
[0, 0, 0, 2, 1 ,8 ,0 ,0 ,0],
[0, 9, 0, 4, 0, 0, 0, 0, 0],
[6, 0, 0, 0, 0, 4, 0, 0, 2],
[0, 0, 0, 0, 0, 0, 8, 3, 7],
[0, 3, 0, 1, 0, 0, 0, 0, 5]]
solution = [[9, 8, 3, 7, 2, 1, 6, 5, 4],
[7, 6, 5, 8, 4, 9, 3, 2, 1],
[1, 2, 4, 3, 6, 5, 7, 9, 8],
[8, 1, 7, 9, 5, 6, 2, 4, 3],
[3, 4, 6, 2, 1, 8, 5, 7, 9],
[5, 9, 2, 4, 7, 3, 1, 8, 6],
[6, 7, 8, 5, 3, 4, 9, 1, 2],
[4, 5, 1, 6, 9, 2, 8, 3, 7],
[2, 3, 9, 1, 8, 7
* {
padding:0px;
margin:0px;
}
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
#header {
clear:both;
background-color: #CCC;
height: 40px;
}
#content {
position:relative;
background-color: #0FF;
}
#leftnav {
float:left;
background-color: #F30;
}
#rightnav {
float:right;
background-color: #6F3;
}
#footer {
clear:both;
background-color: #F9F;
}
/* */
#sudoku{
position:relative;
margin: 0 auto;
}
.sudoku{
width:456px;
height:456px;
border:2px solid #000;
}
.sudokuSquare,.sudokuSquareHighlighted{
width:46px;
height:46px;
float:left;
border:1px solid #000000;
padding:1px;
line-height:46px;
font-size:30px;
text-align:center;
background-color:#FFF;
cursor:default;
}
.sudokuSquareHighlighted{
border:2px solid #317082;
width:46px;
height:46px;
padding:0px;
background-color:#E2EBED;
}
.sudokuSection{
width:150px;
height:150px;
border:1px solid #000000;
float:left;
}
The above is my style.css file in case it may help you guys see how i have made it all look as i currently have it.
Sorry I forgot to mention a few things. One of the requirements of the assignment that I have is to be able to show a table even if the JavaScript is turned off. Have a button that when clicked will check the current Cell against the solution rather than using the onChange.
Sorry I may have explained myself badly. What I mean is that if someone has JavaScript turned off they can still see the Sudoku Grid which means the only thing I need to do is that rather than using the displayCell() function to create the Sudoku Grid I will have to put it into the HTML which I did. I copied your exact grid but put it into HTML. I am only missing 2 things that I have not managed to find how I do it. That is that when I click on a cell and or input a number that Cell is selected and then there should be a button that I click to check the selected cells input against the solution (at the moment Michael's script is doing the checking but through onchange function). So I need to find a way to select cell when clicked or anything is inputed and then a function activated by a button that checks that selected cell against the solution. Please Help me, I have tried but cannot figure it out. I am VERY NEW TO JavaScript. Thanks for your help
Why not use the <input> tag for your cells as in the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
<html lang='en'>
<head>
<meta http-equiv='Content-type' content='text/html;charset=UTF-8'>
<title>Sudoku</title>
<style type="text/css">
* {
padding:0px;
margin:0px;
}
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
/* */
#sudoku{
position:relative;
margin: 0 auto;
}
.sudoku{
width:456px;
height:456px;
border:2px solid #000;
margin: 0 auto;
}
.sudokuSquare {
width:46px;
height:46px;
float:left;
border:1px solid #000000;
padding:1px;
line-height:46px;
font-size:30px;
text-align:center;
background-color:#FFF;
cursor:default;
}
.sudokuSection{
width:150px;
height:150px;
border:1px solid #000000;
float:left;
}
.sudoku br {
clear:left;
}
.sudoku input { width: 1.55em; text-align: center; }
</style>
<script type="text/javascript">
// define the global variables used to represent the board state, size etc.
var startboard; //initial board
var solution;//Sudoku solution board
var boardsize = 9; //number of cells
// Output the cells
function displayCells ()
{
var cells = "<div id='sudoku'><div class='sudoku'>";
for (var row = 0; row < boardsize ; row += 3) {
for (var column = 0; column < boardsize ; column += 3){
cells += "<div class='sudokuSection'>";
for (var rowloop = row; rowloop < row + 3 ; rowloop++) {
for (var columnloop = column; columnloop < column + 3 ; columnloop++){
var id = 'square_' + rowloop + '_' + columnloop;
cells += "<input class='sudokuSquare' id='" + id + "' onchange='save( \"" + rowloop +"\", \"" + columnloop +"\" )'>";
}
cells += "<br>";
}
cells += "<\/div>";
}
cells += "<br>";
}
cells += "<\/div><\/div>";
document.write ( cells );
}
// Output the numbers of the selected Level to the cells and hide the 0's
function displayvalues ()
{
for (var rowloop = 0; rowloop < boardsize ; rowloop++) {
for (var columnloop = 0; columnloop < boardsize ; columnloop++){
var id = 'square_' + rowloop + '_' + columnloop;
var cell = document.getElementById( id );
cell.value = startboard[ rowloop ][ columnloop ];
if (cell.value == 0) {
cell.value = "";
}
}
}
}
var currentRow = ”;
var currentColumn = ”;
// save the current Id
function save( row, column )
{
currentRow = row;
currentColumn = column;
}
// Check changes made
function check ()
{
var row = currentRow;
var column = currentColumn;
var id = ’square_’ + row + ‘_’ + column;
var cell = document.getElementById( id );
row = parseInt( row );
column = parseInt( column );
var correctValue = solution[ row ][ column ];
var value = cell.value;
if (value == correctValue) {
alert("Correct");
} else {
alert("Try again");
}
}
// define the starting and solution board values for the "easy" level
function loadEasy()
{
startboard = [[0, 4, 6, 2, 8, 0, 0, 0, 0],
[5, 0, 0, 6, 0, 0, 7, 4, 0],
[2, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 5, 0, 3, 2, 0, 7, 0],
[0, 2, 1, 0, 0, 0, 4, 8, 0],
[0, 3, 0, 1, 7, 0, 5, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 5],
[0, 9, 4, 0, 0, 1, 0, 0, 7],
[0, 0, 0, 0, 9, 6, 8, 3, 0]];
solution = [[9, 4, 6, 2, 8, 7, 3, 5, 1],
[5, 8, 3, 6, 1, 9, 7, 4, 2],
[2, 1, 7, 5, 4, 3, 6, 9, 8],
[8, 6, 5, 4, 3, 2, 1, 7, 9],
[7, 2, 1, 9, 6, 5, 4, 8, 3],
[4, 3, 9, 1, 7, 8, 5, 2, 6],
[6, 7, 8, 3, 2, 4, 9, 1, 5],
[3, 9, 4, 8, 5, 1, 2, 6, 7],
[1, 5, 2, 7, 9, 6, 8, 3, 4]];
displayvalues();
}
</script>
</head>
<body>
<h1>Sudoku</h1>
<script type="text/javascript">
displayCells();
loadEasy();
document.write("<input type=’submit’ value=’check current’ onclick=’check();’>");
</script>
</body>
</html>
On each change to a cell the users input is saved. If they click the "check current" button then the check() function is called which checks their latest change.
For more on the input tag see: http://www.html-tags-guide.com/html-input-tag.html
I know of no way checking the solution without using Javascript, or a server side script.
A non Javascript solution would require that the displayCells() function be written as a server side script, such as in PHP, or the cells be written into the html file.
For server side checking the grid of <input> tags would need to be placed in a form which would need to be processed by the server side script.
A server side script could also be used to rewrite the page with the standard and difficult puzzles, if the user selected them.
May 15th, 2010
Why not use the <input> tag for your cells as in the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
<html lang=’en’>
<head>
<meta http-equiv=’Content-type’ content=’text/html;charset=UTF-8′>
<title>Sudoku</title>
<style type="text/css">
* {
padding:0px;
margin:0px;
}
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
/* */
#sudoku{
position:relative;
margin: 0 auto;
}
.sudoku{
width:456px;
height:456px;
border:2px solid #000;
margin: 0 auto;
}
.sudokuSquare {
width:46px;
height:46px;
float:left;
border:1px solid #000000;
padding:1px;
line-height:46px;
font-size:30px;
text-align:center;
background-color:#FFF;
cursor:default;
}
.sudokuSection{
width:150px;
height:150px;
border:1px solid #000000;
float:left;
}
.sudoku br {
clear:left;
}
.sudoku input { width: 1.55em; text-align: center; }
</style>
<script type="text/javascript">
// define the global variables used to represent the board state, size etc.
var startboard; //initial board
var solution;//Sudoku solution board
var boardsize = 9; //number of cells
// Output the cells
function displayCells ()
{
var cells = "<div id=’sudoku’><div class=’sudoku’>";
for (var row = 0; row < boardsize ; row += 3) {
for (var column = 0; column < boardsize ; column += 3){
cells += "<div class=’sudokuSection’>";
for (var rowloop = row; rowloop < row + 3 ; rowloop++) {
for (var columnloop = column; columnloop < column + 3 ; columnloop++){
var id = ’square_’ + rowloop + ‘_’ + columnloop;
cells += "<input class=’sudokuSquare’ id=’" + id + "’ onchange=’save( \"" + rowloop +"\", \"" + columnloop +"\" )’>";
}
cells += "<br>";
}
cells += "<\/div>";
}
cells += "<br>";
}
cells += "<\/div><\/div>";
document.write ( cells );
}
// Output the numbers of the selected Level to the cells and hide the 0’s
function displayvalues ()
{
for (var rowloop = 0; rowloop < boardsize ; rowloop++) {
for (var columnloop = 0; columnloop < boardsize ; columnloop++){
var id = ’square_’ + rowloop + ‘_’ + columnloop;
var cell = document.getElementById( id );
cell.value = startboard[ rowloop ][ columnloop ];
if (cell.value == 0) {
cell.value = "";
}
}
}
}
var currentRow = ”;
var currentColumn = ”;
// save the current Id
function save( row, column )
{
currentRow = row;
currentColumn = column;
}
// Check changes made
function check ()
{
var row = currentRow;
var column = currentColumn;
var id = ’square_’ + row + ‘_’ + column;
var cell = document.getElementById( id );
row = parseInt( row );
column = parseInt( column );
var correctValue = solution[ row ][ column ];
var value = cell.value;
if (value == correctValue) {
alert("Correct");
} else {
alert("Try again");
}
}
// define the starting and solution board values for the "easy" level
function loadEasy()
{
startboard = [[0, 4, 6, 2, 8, 0, 0, 0, 0],
[5, 0, 0, 6, 0, 0, 7, 4, 0],
[2, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 5, 0, 3, 2, 0, 7, 0],
[0, 2, 1, 0, 0, 0, 4, 8, 0],
[0, 3, 0, 1, 7, 0, 5, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 5],
[0, 9, 4, 0, 0, 1, 0, 0, 7],
[0, 0, 0, 0, 9, 6, 8, 3, 0]];
solution = [[9, 4, 6, 2, 8, 7, 3, 5, 1],
[5, 8, 3, 6, 1, 9, 7, 4, 2],
[2, 1, 7, 5, 4, 3, 6, 9, 8],
[8, 6, 5, 4, 3, 2, 1, 7, 9],
[7, 2, 1, 9, 6, 5, 4, 8, 3],
[4, 3, 9, 1, 7, 8, 5, 2, 6],
[6, 7, 8, 3, 2, 4, 9, 1, 5],
[3, 9, 4, 8, 5, 1, 2, 6, 7],
[1, 5, 2, 7, 9, 6, 8, 3, 4]];
displayvalues();
}
</script>
</head>
<body>
<h1>Sudoku</h1>
<script type="text/javascript">
displayCells();
loadEasy();
document.write("<input type=’submit’ value=’check current’ onclick=’check();’>");
</script>
</body>
</html>
On each change to a cell the users input is saved. If they click the "check current" button then the check() function is called which checks their latest change.
For more on the input tag see: http://www.html-tags-guide.com/html-input-tag.html
I know of no way checking the solution without using Javascript, or a server side script.
A non Javascript solution would require that the displayCells() function be written as a server side script, such as in PHP, or the cells be written into the html file.
For server side checking the grid of <input> tags would need to be placed in a form which would need to be processed by the server side script.
A server side script could also be used to rewrite the page with the standard and difficult puzzles, if the user selected them.
References :