Help needed with a misbehaving button.

Weewoo

03-20-2012, 04:46 AM

Currently my chess game, which is lacking rules, is operating for the most part. However, the button which allows the players to make moves is only operating once. As far as i can tell it is probably a problem with the recreation of the button in the move() method. Any advice on this code at all is appreciated!

<html>
<head>
<title>Project</title>
<script type ="text/javascript">

//1 means the background is black
//0 means the background is white
//- signifies that a piece is black
//+ signifies that a piece is white
//X means there is no piece
//P means pawn
//R means rook
//N means knight
//B means bishop
//Q means queen
//K means king
//X means no piece again

function print(array){
for(var i = 0; i< array.length;i = i+1){
for(var z = 0; z< array[i].length;z= z+1){
if(array[i][z] == "0XX"){
document.write('<img src = "white.jpg">');

}else if(array[i][z] == "1XX")
{
document.write('<img src = "black.jpg">');
}else if(array[i][z] == "0-P")
{
document.write('<img src = "images/bwPawn.jpg">');
}else if(array[i][z] == "1-P")
{
document.write('<img src = "images/bbPawn.jpg">');
}else if(array[i][z] == "0+P")
{
document.write('<img src = "images/wwPawn.jpg">');
}else if(array[i][z] == "1+P")
{
document.write('<img src = "images/wbPawn.jpg">');
}else if(array[i][z] == "0-R")
{
document.write('<img src = "images/bwRook.jpg">');
}else if(array[i][z] == "1-R")
{
document.write('<img src = "images/bbRook.jpg">');
}else if(array[i][z] == "0+R")
{
document.write('<img src = "images/wwRook.jpg">');
}else if(array[i][z] == "1+R")
{
document.write('<img src = "images/wbRook.jpg">');
}else if(array[i][z] == "0-N")
{
document.write('<img src = "images/bwKnight.jpg">');
}else if(array[i][z] == "1-N")
{
document.write('<img src = "images/bbKnight.jpg">');
}else if(array[i][z] == "0+N")
{
document.write('<img src = "images/wwKnight.jpg">');
}else if(array[i][z] == "1+N")
{
document.write('<img src = "images/wbKnight.jpg">');
}else if(array[i][z] == "0-B")
{
document.write('<img src = "images/bwBishop.jpg">');
}else if(array[i][z] == "1-B")
{
document.write('<img src = "images/bbBishop.jpg">');
}else if(array[i][z] == "0+B")
{
document.write('<img src = "images/wwBishop.jpg">');
}else if(array[i][z] == "1+B")
{
document.write('<img src = "images/wbBishop.jpg">');
}else if(array[i][z] == "0-Q")
{
document.write('<img src = "images/bwQueen.jpg">');
}else if(array[i][z] == "1-Q")
{
document.write('<img src = "images/bbQueen.jpg">');
}else if(array[i][z] == "0+Q")
{
document.write('<img src = "images/wwQueen.jpg">');
}else if(array[i][z] == "1+Q")
{
document.write('<img src = "images/wbQueen.jpg">');
}else if(array[i][z] == "0-K")
{
document.write('<img src = "images/bwKing.jpg">');
}else if(array[i][z] == "1-K")
{
document.write('<img src = "images/bbKing.jpg">');
}else if(array[i][z] == "0+K")
{
document.write('<img src = "images/wwKing.jpg">');
}else if(array[i][z] == "1+K")
{
document.write('<img src = "images/wbKing.jpg">');
}
}
document.write("<br>");
}
}

function move(boardz){ //for moving pieces. variables declare the 2 positions of the array that move.
var rowS = prompt("Please enter the desired row you wish to move [1 to 8]","1");
var colS = prompt("Please enter the desired column you wish to move [1 to 8]","1");
var rowF = prompt("Please enter the targetted row [1 to 8]","1");
var colF = prompt("Please enter the targetted column [1 to 8]","1");
rowS = parseInt(rowS)-1;
colS = parseInt(colS)-1;
rowF = parseInt(rowF)-1;
colF = parseInt(colF)-1;

temp = boardz[rowS][colS].charAt(1) + boardz[rowS][colS].charAt(2); // this and the next 2 lines move the piece
boardz[rowS][colS] = boardz[rowS][colS].charAt(0) + "XX";
boardz[rowF][colF] = boardz[rowF][colF].charAt(0) + temp;
document.clear();
print(boardz);
document.write('<button type="button" onclick="move(boardz);">'+ "Move."+ '</button>');
}

var board = new Array(
["0-R","1-N","0-B","1-Q","0-K","1-B","0-N","1-R"],
["1-P","0-P","1-P","0-P","1-P","0-P","1-P","0-P"],
["0XX","1XX","0XX","1XX","0XX","1XX","0XX","1XX"],
["1XX","0XX","1XX","0XX","1XX","0XX","1XX","0XX"],
["0XX","1XX","0XX","1XX","0XX","1XX","0XX","1XX"],
["1XX","0XX","1XX","0XX","1XX","0XX","1XX","0XX"],
["0+P","1+P","0+P","1+P","0+P","1+P","0+P","1+P"],
["1+R","0+N","1+B","0+Q","1+K","0+B","1+N","0+R"]);

print(board);

</script>
</head>
<body>
<button type="button" onclick="move(board);">Move.</button>
</body>
</html>

Old Pedant

03-20-2012, 06:22 AM

You are hereby hosed. You will have to redo this program, a *LOT*.

You can *NOT* use document.write once the page has been fully loaded by the browser.

If you do so, then *ALL* the page contents are *ERASED* before the document.write takes place, *INCLUDING* all JavaScript on the page.

So what is happening is indeed your code for
print(boardz);
document.write('<button type="button" onclick="move(boardz);">'+ "Move."+ '</button>');
works, but once done all the JavaScript on the page is now gone. So of course when the user clicks on the button it tries to call the move( ) function but that function no longer exists!

**********

You *COULD* fix this by putting your board into an <iframe> and using your print(array) function to instead write to that <iframe>. But it seems a fairly clumsy way to do this. I think it would be much better to learn to use DOM manipulation so you would simply change the contents of cell(s) on the board.

Old Pedant

03-20-2012, 06:31 AM

By the by, instead of using all those if ... else if ... constructions, you should learn to use switch( ).

var pic = "";
switch( array[i][z] )
{
case "0XX": pix = "white"; break;
case "1XX": pix = "black"; break;
case ...
case "1+K": pix = "wbKing"; break;

}
document.write('<img src="images/' + pix + '.jpg"/>');

But even better would be to create a set of associations:

var codeToPix = {
"0xx" : "white",
"1XX" : "black",
...
"1+K" : "wbKing"
};

...
for(var i = 0; i< array.length; ++i)
{
var row = array[i];
for(var z = 0; z< row.length; ++z)
{
document.write('<img src="images/' + codeToPix[row[z]] + '.jpg"/>');
}
}

Though of course it will still be better, I think, to get rid of the document.write's.

blaze4218

03-20-2012, 07:19 AM

Help needed with a misbehaving button.
Straight to bed with no dessert.
That'll learn 'em!

I can not stress this enough: DO NOT DO THE FOLLOWING

<html>
<head>
<title>Project</title>
</head>
<body>
<div id="boardContainer">
</div>
<button type="button" onclick="move(board);">Move.</button>
<script type ="text/javascript">

//1 means the background is black
//0 means the background is white
//- signifies that a piece is black
//+ signifies that a piece is white
//X means there is no piece
//P means pawn
//R means rook
//N means knight
//B means bishop
//Q means queen
//K means king
//X means no piece again

var customHTMLContainer='';

function customWrite(newVal){
customHTMLContainer += newVal;
}

function print(array){

customHTMLContainer='';

for(var i = 0; i< array.length;i = i+1){
for(var z = 0; z< array[i].length;z= z+1){
if(array[i][z] == "0XX"){
customWrite('<img src = "white.jpg">');

}else if(array[i][z] == "1XX")
{
customWrite('<img src = "black.jpg">');
}else if(array[i][z] == "0-P")
{
customWrite('<img src = "images/bwPawn.jpg">');
}else if(array[i][z] == "1-P")
{
customWrite('<img src = "images/bbPawn.jpg">');
}else if(array[i][z] == "0+P")
{
customWrite('<img src = "images/wwPawn.jpg">');
}else if(array[i][z] == "1+P")
{
customWrite('<img src = "images/wbPawn.jpg">');
}else if(array[i][z] == "0-R")
{
customWrite('<img src = "images/bwRook.jpg">');
}else if(array[i][z] == "1-R")
{
customWrite('<img src = "images/bbRook.jpg">');
}else if(array[i][z] == "0+R")
{
customWrite('<img src = "images/wwRook.jpg">');
}else if(array[i][z] == "1+R")
{
customWrite('<img src = "images/wbRook.jpg">');
}else if(array[i][z] == "0-N")
{
customWrite('<img src = "images/bwKnight.jpg">');
}else if(array[i][z] == "1-N")
{
customWrite('<img src = "images/bbKnight.jpg">');
}else if(array[i][z] == "0+N")
{
customWrite('<img src = "images/wwKnight.jpg">');
}else if(array[i][z] == "1+N")
{
customWrite('<img src = "images/wbKnight.jpg">');
}else if(array[i][z] == "0-B")
{
customWrite('<img src = "images/bwBishop.jpg">');
}else if(array[i][z] == "1-B")
{
customWrite('<img src = "images/bbBishop.jpg">');
}else if(array[i][z] == "0+B")
{
customWrite('<img src = "images/wwBishop.jpg">');
}else if(array[i][z] == "1+B")
{
customWrite('<img src = "images/wbBishop.jpg">');
}else if(array[i][z] == "0-Q")
{
customWrite('<img src = "images/bwQueen.jpg">');
}else if(array[i][z] == "1-Q")
{
customWrite('<img src = "images/bbQueen.jpg">');
}else if(array[i][z] == "0+Q")
{
customWrite('<img src = "images/wwQueen.jpg">');
}else if(array[i][z] == "1+Q")
{
customWrite('<img src = "images/wbQueen.jpg">');
}else if(array[i][z] == "0-K")
{
customWrite('<img src = "images/bwKing.jpg">');
}else if(array[i][z] == "1-K")
{
customWrite('<img src = "images/bbKing.jpg">');
}else if(array[i][z] == "0+K")
{
customWrite('<img src = "images/wwKing.jpg">');
}else if(array[i][z] == "1+K")
{
customWrite('<img src = "images/wbKing.jpg">');
}
}
customWrite("<br>");
}
document.getElementById('boardContainer').innerHTML = customHTMLContainer;
}

function move(boardz){ //for moving pieces. variables declare the 2 positions of the array that move.
var rowS = prompt("Please enter the desired row you wish to move [1 to 8]","1");
var colS = prompt("Please enter the desired column you wish to move [1 to 8]","1");
var rowF = prompt("Please enter the targetted row [1 to 8]","1");
var colF = prompt("Please enter the targetted column [1 to 8]","1");
rowS = parseInt(rowS)-1;
colS = parseInt(colS)-1;
rowF = parseInt(rowF)-1;
colF = parseInt(colF)-1;

temp = boardz[rowS][colS].charAt(1) + boardz[rowS][colS].charAt(2); // this and the next 2 lines move the piece
boardz[rowS][colS] = boardz[rowS][colS].charAt(0) + "XX";
boardz[rowF][colF] = boardz[rowF][colF].charAt(0) + temp;
document.clear();
print(boardz);
//customWrite('<button type="button" onclick="move(boardz);">'+ "Move."+ '</button>');
}

var board = new Array(
["0-R","1-N","0-B","1-Q","0-K","1-B","0-N","1-R"],
["1-P","0-P","1-P","0-P","1-P","0-P","1-P","0-P"],
["0XX","1XX","0XX","1XX","0XX","1XX","0XX","1XX"],
["1XX","0XX","1XX","0XX","1XX","0XX","1XX","0XX"],
["0XX","1XX","0XX","1XX","0XX","1XX","0XX","1XX"],
["1XX","0XX","1XX","0XX","1XX","0XX","1XX","0XX"],
["0+P","1+P","0+P","1+P","0+P","1+P","0+P","1+P"],
["1+R","0+N","1+B","0+Q","1+K","0+B","1+N","0+R"]);

print(board);

</script>

</body>
</html>
it's sloppy, and contrived... But I think it is the way to solve your particular issue with as little rewriting as possible.

Read Old Pedant's advise and definitely don't use my solution (the DOM is your friend, and document.write() is frickin Freddy Krueger! a nightmare that just won't die!!!)...
but it should answer your question and solve the problem at hand.

And as always, good luck :thumbsup:

Old Pedant

03-20-2012, 07:38 AM

Cute, Blaze!

I don't think it would be much more work at all to instead use an <iframe>.

But either solution is indeed a sloppy one.

I chuckled a little at the "notation" used. There's no reason for the leading "1" and "0" in the square codes. It would be better to simply flip/flop black to white to black as you created the cells. And you could also use half as many images if you made them .gif or .png files with transparent backgrounds and then dropped them into a board that is already black and white (or whatever your choice of colors).