Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help needed with a misbehaving button.

    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!

    Code:
    <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>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,537
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    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
    Code:
                   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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,537
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    By the by, instead of using all those if ... else if ... constructions, you should learn to use switch( ).

    Code:
                    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:

    Code:
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    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
    Code:
    <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
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,537
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    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).
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •