CODEWITHSUNDEEP
javascript
Armin Bu
Armin Bu

Reputation: 1360

Trouble with debugging

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.)

Upvotes: 1

Views: 73

Answers (1)

Sam I am says Reinstate Monica
Sam I am says Reinstate Monica

Reputation: 31194

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

Upvotes: 2

Related Questions