Trouble with debugging

Question

I have a small problem with javascript, because it doesn't understand me and in some kind I do not understand what it's doing with my script. I am trying to write a chess program for my own. First, here is a part of my code:

<html>

<head>

    <title>
        Klassix
    </title>    


    <!--    Scripts   -->
    <link   rel="stylesheet" 
            href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

    <script src="http://code.jquery.com/jquery-1.9.1.js">
    </script>

    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">
    </script>

    <script>

        $(function() {
            $( ".draggable" ).draggable({ snap: true });
        });
    </script>



<style type="text/css">

    #board      {   position
                    height:840px;
                    width:840px;
                    border:20px solid #61380B;
                    border-collapse:collapse;   }

    .horizontal {   height:100px;
                    width:100px;
                    border:0px; }

    .vertical   {   height:100px;
                    width:100px;
                    border:0px; }   


    </style>

</head>


<body>

        <div id="game">
            <table id="board">
            </table>
        </div>


        <script type="text/javascript">     

        var board = document.getElementById('board')
        var color = 0; 

        for( var h = 1; h < 9; h++) {

            var newTr = document.createElement('tr');
            newTr.setAttribute('id', 'tr' + h)
            newTr.setAttribute('class', 'vertical')
            board.appendChild(newTr);

            for( var v = 1; v < 9 ; v++) {


                color = v % 2 ;

                var newTd = document.createElement('td');
                newTd.setAttribute('id', 'td' + v)
                newTd.setAttribute('class', 'horizontal')

                if(h === 1 || h === 3 || h === 5 || h === 7 && color === 0) {
                    newTd.style.backgroundColor = '#000000';
                } else if(h === 1 || h === 3 || h === 5 || h === 7 && color === 1) {
                    newTd.style.backgroundColor = '#ffffff';        
                } else if( h === 2 || h === 4 || h === 6 || h === 8 && color === 1) {
                    newTd.style.backgroundColor = '#000000';
                } else if(h === 2 || h === 4 || h === 6 || h === 8  && color === 0) {
                    newTd.style.backgroundColor = '#ffffff';        
                }

                document.getElementById('tr' + h).appendChild(newTd);   
                console.log(h + '|' + v + '|' + color)                  
            }
        }
    </script>

</body>

So, as you can see, I try to generate a chess board with javascript in order to avoid writing tons of text. The board should be alternately black and white. This should be clear with the if-conditions I have made in the last script part. But my browser shows me that the first 6 rows are black and the last 2 rows white and black, as it should be. Soooo, Finally my question is how to do it right or maybe I should take a completely different approach. I hope someone can help me. (I am not an English native speaker. Maybe you can excuse certain mistakes.)

Since the board itself is static, it probably makes more sense to just create it directly in the markup/styles instead of dynamically building it with JavaScript. — David, Jul 16 '13 at 15:02
You could do this much more efficiently. Why not stick what you've got in a jsfiddle and someone will probably run with it. — net.uk.sweet, Jul 16 '13 at 15:03
seems backwards... i would just write the markup for the static board. If your code is server side then sure generate the board that way but client side js to create something that is static, seems like overkill — Huangism, Jul 16 '13 at 15:04
On review, David's point is a good one. However, if the purpose of the exercise is to advance at javascript you might still want to generate the board dynamically. — net.uk.sweet, Jul 16 '13 at 15:04
Yes I have a friend who collects minigames and let them run on one website and so on... So I want to do it dynamicly. I know the board is static and first I thougt to do it like you all say... — Armin Bu, Jul 16 '13 at 15:08

score 2 · Accepted Answer · answered Jul 16 '13 at 15:06

2

according to this page, && is evaluated before || therefore, the following condition

if(h === 1 || h === 3 || h === 5 || h === 7 && color === 0)

is eqivelant to

if(h === 1 || h === 3 || h === 5 || (h === 7 && color === 0))

.

But I think you intended your conditions to look more like the following

if((h === 1 || h === 3 || h === 5 || h === 7) && color === 0)

Just add perens

answered Jul 16 '13 at 15:06

Sam I am says Reinstate Monica

30,851
12
72
100

1

(h === 1 || h === 3 || h === 5 || h === 7) can most likely be refactored into h % 2 – Huangism Jul 16 '13 at 15:08
@Huangism correct. Sorry, I misread and didn't see that the loop only went to 8 so I edited my comment. :) – Ricky Mutschlechner Jul 16 '13 at 15:11
@RickyMutschlechner yea I didn't think of the actual logic I just thought all the odd numbers 1 after another = need to refactor :) – Huangism Jul 16 '13 at 15:12
Personally, I tend to use parentheses liberally... especially when spaced intelligently, you can increase readability, and not generally have to worry so much about non-basic operator precedence. – Steve Sep 16 '13 at 09:24

Trouble with debugging

1 Answers1