调试有问题

时间:2013-07-16 15:00:13

标签: javascript

我对javascript有一个小问题,因为它不理解我,在某种程度上我不明白它在用我的脚本做什么。我正在为自己写一个国际象棋程序。首先,这是我的代码的一部分:

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

所以,正如你所看到的,我尝试使用javascript生成一个棋盘,以避免写入大量文本。电路板应交替黑色和白色。这应该清楚我在最后一个脚本部分中做出的if条件。但我的浏览器告诉我,前6行是黑色,最后2行是白色和黑色,应该是这样。 Soooo,最后我的问题是如何正确地做或者我应该采取完全不同的方法。我希望有一个人可以帮助我。 (我不是英语为母语的人。也许你可以原谅某些错误。)

1 个答案:

答案 0 :(得分:2)

根据this page&&会在||之前进行评估,因此,以下条件

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

是eqivelant

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

但我认为您希望您的条件看起来更像以下

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

添加perens