I have inspect the javascript coe but there are errors tahat I can\'t figure out
ID: 3686008 • Letter: I
Question
I have inspect the javascript coe but there are errors tahat I can't figure out how to resolve in order to have program work properly.
<!DOCTYPE html>
<html>
<head>
<title>Greg's Gambits | Greg's 15</title>
<link href="greg.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<script>
//declare and initialize variables
var cells;
var swapped;
function setup()
{
debugger;
// create function to load array and call placeNumbers()
cells = new Array([document.getElementById("cell00"),
document.getElementById("cell01"),
document.getElementById("cell02"),
document.getElementById("cell03"),
document.getElementById("cell10"),
document.getElementById("cell11"),
document.getElementById("cell12"),
document.getElementById("cell13"),
document.getElementById("cell20"),
document.getElementById("cell21"),
document.getElementById("cell22"),
document.getElementById("cell23"),
document.getElementById("cell30"),
document.getElementById("cell31"),
document.getElementById("cell32"),
document.getElementById("cell33")]);
placeNumbers();
}
function placeNumbers()
{
// create function to place random numbers in the cells
var numbers = new Array();
for (var i=0; i<=16; i++)
numbers[i] = i;
var randomLoc;
var temp;
for (i=0; i < 16; i++)
{
randomLoc = Math.floor(Math.random()* 15 + 1);
temp = numbers[i];
numbers[i] = numbers[randomLoc];
numbers[randomLoc] = temp;
}
i = 0;
for (var rows = 0; rows < 4; rows++)
{
for (var cols = 0; cols < 4; cols++)
{
if(numbers[i] != 0)
cells[rows][cols].innerHTML = numbers[i];
else
cells[rows][cols].innerHTML = " ";
++i;
}
}
}
function doClick(row, col)
{
// create the function that will check, each time a cell is clicked, if
// the move is legal and will, if it is not legal, display an alert
// if the move is legal, the function should call the swap() function
// it should also check to see if this move is a winner, i.e., call checkWinner()
var top = row - 1;
var bottom = row + 1;
var left = col - 1;
var right = col + 1;
swapped = false;
if(top != -1 && cells[top][col].innerHTML == "")
swap(cells[row][col], cells[top][col]);
else if(right != 4 && cells[row][right].innerHTML == "")
swap(cells[row][col], cells[row][right]);
else if(bottom != 4 && cells[bottom][col].innerHTML == "")
swap(cells[row][col], cells[bottom][col]);
else if(left != -1 && cells[row][left].innerHTML == "")
swap(cells[row][col], cells[row][left]);
else
alert("Illegal move.");
checkWinner();
}
function swap(firstCell, secondCell)
{
// create function to swap values
swapped = true;
secondCell.innerHTML = firstCell.innerHTML;
firstCell.innerHTML = "";
}
function checkWinner()
{
// create function to check if the last move made makes this a win
// display winning message if it is a winner
var win = true;
for (var i = 0; i < 4; i++)
{
for (var j = 0; j < 4; j++)
{
if (!(cells[i][j].innerHTML == i*4 + j + 1))
if (!(i == 3 && j + 3))
win = false;
}
}
if (win)
{
alert("Congratulations! You Won!");
if (window.prompt("Play again?", "yes"))
placeNumbers();
}
}
</script>
</head>
<body>
<div id="container">
<img src="images/superhero.jpg" class="floatleft" alt="" />
<h1 id="logo"><em>Greg's 15</em></h1>
<p> </p>
<div id="nav">
<p>
<a href="index.html">Home</a>
<a href="greg.html">About Greg</a>
<a href="play_games.html">Play a Game</a>
<a href="signin.html">Sign In</a>
<a href="contact.html">Contact Us</a>
</p>
</div>
<div id="content">
<p>
<input type="button" value="Start the game" /></p>
<p>You can move any number into an empty spot by moving up, down,right, or left. Diagonal moves are not allowed. The object is to get all the numbers into correct order, from 1 through 15 with the empty space at the end. </p>
<table>
<!-- create the 4 X 4 table with a call, in each cell, to the doClick(x,x) function -->
<tr>
<td><span id="cell00"></span> </td>
<td><span id="cell01"></span> </td>
<td><span id="cell02"></span> </td>
<td><span id="cell03"></span> </td>
</tr>
<tr>
<td><span id="cell10"></span> </td>
<td><span id="cell11"></span> </td>
<td><span id="cell12"></span> </td>
<td><span id="cell13"></span> </td>
</tr>
<tr>
<td><span id="cell20"></span> </td>
<td><span id="cell21"></span> </td>
<td><span id="cell22"></span> </td>
<td><span id="cell23"></span> </td>
</tr>
<tr>
<td><span id="cell30"></span> </td>
<td><span id="cell31"></span> </td>
<td><span id="cell32"></span> </td>
<td><span id="cell33"></span> </td>
</tr>
</table>
</div>
<div id="footer">
Copyright © 2013 Greg's Gambits<br />
<a href="mailto:dakins1@cougarmail.collin.edu">dakins1@cougarmail.collin.edu</a>
</div>
</div>
</body>
</html>
Explanation / Answer
<!--
Hi,
Now this code working fine. replace your code with this.
In your code global variable in javascript var cells.
In setup function you create array cells according to matrix but this array not working in proper way.
I have comment array code in setup() function and direct call next function placeNumbers();
In placeNumber function replace cells[rows][cols].innerHTML = numbers[i] with document.getElementById("cell"+rows+''+cols).innerHTML = numbers[i];
we add html according to current cells id.
Other change in doClick(row, col) replace cells with document.getElementById code.
this code working fine. please remove commented code if you want
Code starte from here
-->
<!DOCTYPE html>
<html>
<head>
<title>Greg's Gambits | Greg's 15</title>
<link href="greg.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<script>
//declare and initialize variables
var cells;
var swapped;
function setup()
{
//debugger;
// create function to load array and call placeNumbers()
/*cells = new Array([document.getElementById("cell00"),
document.getElementById("cell01"),
document.getElementById("cell02"),
document.getElementById("cell03"),
document.getElementById("cell10"),
document.getElementById("cell11"),
document.getElementById("cell12"),
document.getElementById("cell13"),
document.getElementById("cell20"),
document.getElementById("cell21"),
document.getElementById("cell22"),
document.getElementById("cell23"),
document.getElementById("cell30"),
document.getElementById("cell31"),
document.getElementById("cell32"),
document.getElementById("cell33")]);*/
//console.log(cells);
placeNumbers();
}
function placeNumbers()
{
// create function to place random numbers in the cells
var numbers = new Array();
for (var i=0; i<=16; i++)
numbers[i] = i;
var randomLoc;
var temp;
for (i=0; i < 16; i++)
{
randomLoc = Math.floor(Math.random()* 15 + 1);
temp = numbers[i];
numbers[i] = numbers[randomLoc];
numbers[randomLoc] = temp;
}
i = 0;
for (var rows = 0; rows < 4; rows++)
{
for (var cols = 0; cols < 4; cols++)
{
//alert(numbers[i]);
if(numbers[i] != 0){
document.getElementById("cell"+rows+''+cols).innerHTML = numbers[i];
//cells[rows][cols].innerHTML = numbers[i];
}else{
document.getElementById("cell"+rows+''+cols).innerHTML = " ";
//cells[rows][cols].innerHTML = " ";
}
++i;
}
}
}
function doClick(row, col)
{
// create the function that will check, each time a cell is clicked, if
// the move is legal and will, if it is not legal, display an alert
// if the move is legal, the function should call the swap() function
// it should also check to see if this move is a winner, i.e., call checkWinner()
var top = row - 1;
var bottom = row + 1;
var left = col - 1;
var right = col + 1;
swapped = false;
var current_col = document.getElementById("cell"+row+''+col);
var current_top = document.getElementById("cell"+top+''+col);
var current_right = document.getElementById("cell"+row+''+right);
var current_bottom = document.getElementById("cell"+bottom+''+col);
var current_left = document.getElementById("cell"+row+''+left);
if(top != -1 && current_top.innerHTML == "")
swap(current_col, current_top);
else if(right != 4 && current_right.innerHTML == "")
swap(current_col, current_right);
else if(bottom != 4 && current_bottom.innerHTML == "")
swap(current_col, current_bottom);
else if(left != -1 && current_left.innerHTML == "")
swap(current_col, current_left);
else
alert("Illegal move.");
checkWinner();
}
function swap(firstCell, secondCell)
{
// create function to swap values
swapped = true;
secondCell.innerHTML = firstCell.innerHTML;
firstCell.innerHTML = "";
}
function checkWinner()
{
// create function to check if the last move made makes this a win
// display winning message if it is a winner
var win = true;
for (var i = 0; i < 4; i++)
{
for (var j = 0; j < 4; j++)
{
if (!(document.getElementById("cell"+i+''+j).innerHTML == i*4 + j + 1))
if (!(i == 3 && j + 3))
win = false;
}
}
if (win)
{
alert("Congratulations! You Won!");
if (window.prompt("Play again?", "yes"))
placeNumbers();
}
}
</script>
</head>
<body>
<div id="container">
<img src="images/superhero.jpg" class="floatleft" alt="" />
<h1 id="logo"><em>Greg's 15</em></h1>
<p> </p>
<div id="nav">
<p>
<a href="index.html">Home</a>
<a href="greg.html">About Greg</a>
<a href="play_games.html">Play a Game</a>
<a href="signin.html">Sign In</a>
<a href="contact.html">Contact Us</a>
</p>
</div>
<div id="content">
<p>
<input type="button" value="Start the game" />
</p>
<p>You can move any number into an empty spot by moving up, down,right, or left. Diagonal moves are not allowed. The object is to get all the numbers into correct order, from 1 through 15 with the empty space at the end. </p>
<table>
<!-- create the 4 X 4 table with a call, in each cell, to the doClick(x,x) function -->
<tr>
<td><span id="cell00"></span> </td>
<td><span id="cell01"></span> </td>
<td><span id="cell02"></span> </td>
<td><span id="cell03"></span> </td>
</tr>
<tr>
<td><span id="cell10"></span> </td>
<td><span id="cell11"></span> </td>
<td><span id="cell12"></span> </td>
<td><span id="cell13"></span> </td>
</tr>
<tr>
<td><span id="cell20"></span> </td>
<td><span id="cell21"></span> </td>
<td><span id="cell22"></span> </td>
<td><span id="cell23"></span> </td>
</tr>
<tr>
<td><span id="cell30"></span> </td>
<td><span id="cell31"></span> </td>
<td><span id="cell32"></span> </td>
<td><span id="cell33"></span> </td>
</tr>
</table>
</div>
<div id="footer">
Copyright © 2013 Greg's Gambits<br />
<a href="mailto:dakins1@cougarmail.collin.edu">dakins1@cougarmail.collin.edu</a>
</div>
</div>
</body>
</html>