Requiring help identifying error in chess JavaScript code

Question

At the moment I'm just trying to display the chessboard, while giving me the option of changing the board setup at a later date. The code I have here is aiming to display a chessboard (of some kind) to the webpage, however, when I call the function in html, I can't get the code to display the board. Any help with this would be greatly appreciated as I'm still learning the JavaScript language.

function displayBoard() {
    //Initiating peice values for white
    var wking = 10, wkingValue = "&#9813;";
    var wqueen = 9, wqueenValue = "&#9812;";
    var wrook = 5, wrookValue = "&#9814;";
    var wbishop = 3.5, wbishopValue = "&#9815;";
    var wknight = 3, wknightValue = "&#9816;";
    var wpawn = 1, wpawnValue = "&#9817;";
    //Initiating peice values for black
    var bking = -wking, bkingValue = "&#9819;";
    var bqueen = -wqueen, bqueenValue = "&#9818;";
    var brook = -wrook, brookValue = "&#9820;";
    var bbishop = -wbishop, bbishopValue = "&#9821;";
    var bknight = -wknight, bknightValue = "&#9822;";
    var bpawn = -wpawn, bpawnValue = "&#9823;";
    //Initialising final string
    var chessboardTable = "";
    //Initialising board array
    var defaultBoardArray = [[brook, bknight, bbishop, bqueen, bking, bbishop, bknight, brook],
                            [bpawn, bpawn, bpawn, bpawn, bpawn, bpawn, bpawn, bpawn],
                            [0, 0, 0, 0, 0, 0, 0, 0],
                            [0, 0, 0, 0, 0, 0, 0, 0],
                            [0, 0, 0, 0, 0, 0, 0, 0],
                            [0, 0, 0, 0, 0, 0, 0, 0],
                            [wpawn, wpawn, wpawn, wpawn, wpawn, wpawn, wpawn, wpawn],
                            [wrook, wknight, wbishop, wqueen, wking, wbishop, wknight, wrook]];

    //Initialising search squares
    var fLetter = "a";
    var fNumber = "1";
    var initialfillRank = false;

    //Beginning main code functions
    var peice = "";
    var defValue = "";
    var defClass = "";
    var rank = "";
    var file = "";

    //Entering Looping Functions
    chessboardTable += "<table id='chess_board' cellpadding='0' cellspacing='0'>";
    chessboardTable += "<tr>";
    // i = rank; k = file;
    for (i = 8; i <= 0; i--) {
        for (k = 1; k <= 8; k++) {
            //Finding grid coordinates
            switch (k) {
                case (1):
                    file === "a";
                    break;
                case (2):
                    file === "b";
                    break;
                case (3):
                    file === "c";
                    break;
                case (4):
                    file === "d";
                    break;
                case (5):
                    file === "e";
                    break;
                case (6):
                    file === "f";
                    break;
                case (7):
                    file === "g";
                    break;
                case (8):
                    file === "h";
                    break;
                default:
                    break;
            }
            switch (i) {
                case (8):
                    rank === "8";
                    initialfillRank = true;
                    break;
                case (7):
                    rank === "7";
                    initialfillRank = true;
                    break;
                case (6):
                    rank === "6";
                    break;
                case (5):
                    rank === "5";
                    break;
                case (4):
                    rank === "4";
                    break;
                case (3):
                    rank === "3";
                    break;
                case (2):
                    rank === "2";
                    initialfillRank = true;
                    break;
                case (1):
                    rank === "1";
                    initialfillRank = true;
                    break;
                default:
                    break;
            }
            //Finding the class names
            if (rank === 8) {
                if (file === "a" || file === "h") {
                    defClass === "brook";
                    defValue === brookValue;
                }
                else if (file === "b" || file === "g") {
                    defClass === "bknight";
                    defValue === bknightValue;
                }
                else if (file === "c" || file === "f") {
                    defClass === "bbishop";
                    defValue === bbishopValue;
                }
                else if (file === "d") {
                    defClass === "bqueen";
                    defValue === bqueenValue;
                }
                else if (file === "e") {
                    defClass === "bking";
                    defValue === bkingValue;
                }
            }
            else if (rank === 7) {
                defClass === "bpawn";
                defValue === bpawnValue;
            }
            else if (rank === 1) {
                if (file === "a" || file === "h") {
                    defClass === "wrook";
                    defValue === wrookValue;
                }
                else if (file === "b" || file === "g") {
                    defClass === "wknight";
                    defValue === wknightValue;
                }
                else if (file === "c" || file === "f") {
                    defClass === "wbishop";
                    defValue === wbishopValue;
                }
                else if (file === "d") {
                    defClass === "wqueen";
                    defValue === wqueenValue;
                }
                else if (file === "e") {
                    defClass === "wking";
                    defValue === wkingValue;
                }
            }
            else if (rank === 2) {
                defClass === "wpawn";
                defValue === wpawnValue;
            }
            //Printing the code
            if (initialfillRank === true) {
                chessboardTable += "<td id='";
                chessboardTable += file;
                chessboardTable += rank;
                chessboardTable += "'><a href='#' class='";
                chessboardTable += defClass;
                chessboardTable += "'>";
                chessboardTable += defValue;
                chessboardTable += "</a></td>";
            }
            else if (initialfillRank === false) {
                chessboardTable += "<td id='";
                chessboardTable += file;
                chessboardTable += rank;
                chessboardTable += "'></td>";

            }
            if (file === "h" && rank !== 1) {
                chessboardTable += "</tr>";
                chessboardTable += "<tr>";
            }
        }
    }
    chessboardTable += "</table>";
    document.write(chessboardTable);
}

Your first loop isn't executing, because of wrong condition. It should be >= instead of <= `for (i = 8; i >= 0; i--) {` — Mario Dian, Aug 15 '13 at 07:54

JJJ · Answer 1 · 2013-08-15T07:55:44.593

0

You seem to use === everywhere, even where you mean to assign values instead of comparing them. Go through the code and change === to = where you assign values, e.g.:

if (file === "a" || file === "h") {   // comparison, === is ok
    defClass = "brook";               // assignment, use single = instead 
    defValue = brookValue;            // --"--
}

and so on.

The next problem is that you assign string values but strictly compare to numbers, which is going to be false every time:

rank = "8";

// ..later:
if (rank === 8) {

edited Aug 15 '13 at 07:55

answered Aug 15 '13 at 07:50

JJJ

32,902
20
89
102

Thanks, better fix that up. However, now that I have fixed it up, It still doesnt run :( – Sev Aug 15 '13 at 07:55
As Mario commented on the question above, the for loop condition is wrong. – JJJ Aug 15 '13 at 08:01
@user2685137: Juhana is right. Replace "===" to "==" in conditional statements,like (rank === 8) to (rank == 8). "==" only checks value,whereas "===" checks both value and datatype. – Mohit Pandey Aug 15 '13 at 08:03
@MohitPandey That's not a good solution. It's better to keep the `===` and change the comparison values to match the actual contents of the variable (either `rank = 8` or `if( rank === "8" )`. – JJJ Aug 15 '13 at 08:04
I've fixed up the errors you guys have pointed out, so thanks heaps! Yet, now when the function is called I get "Http Error 404.0 - Not Found"...SO at least I'm getting some sort of response, Im not sure if this error is due to my javascript though... – Sev Aug 15 '13 at 08:06
You shouldn't use `document.write()`. It will wipe out the rest of the page contents. – JJJ Aug 15 '13 at 08:14
lol, really? I actually found some code that uses document.write, but doesn't wipe the pages contents. However, if you think its unwise, could you please suggest an alternative way to doing it? – Sev Aug 15 '13 at 08:19
http://stackoverflow.com/questions/4537963/javascript-what-are-alternatives-to-document-write – JJJ Aug 15 '13 at 08:22

Mario Dian · Accepted Answer · 2013-08-15T08:24:08.927

0

I made a working fiddle. There is still issue with the first loop. You have to count from 7 to 0, otherwise you get 9 squares on Y axis.

for (i = 7; i >= 0; i--) {

// EDIT

I managed to get the pieces working. No need to use variable rank.

edited Aug 15 '13 at 08:24

answered Aug 15 '13 at 08:07

Mario Dian

166
5

It looks pretty cool, except the code should have displayed the actual chess pieces as well, that's why I have the "♛" at the beginning of the code. However, thanks for fixing the code so it actually runs :D – Sev Aug 15 '13 at 08:10
1

changed: http://jsfiddle.net/jK3Kd/2/ 1) ranks are and stay now integers 2) reset `defClass` and `defValue` so the whole board is _not_ filled with pawns. 3) shortened the code a bit, by using 1 to get rid of a switch, and calculating the `file`. If you need more help setting up the automatic filling using your array just drop a comment... – thriqon Aug 15 '13 at 08:24
Thanks heaps thriqon, If I do need help, I'll comment. But I think I got it from here. – Sev Aug 15 '13 at 08:26

Requiring help identifying error in chess JavaScript code

2 Answers2