调试出现问题

Trouble with debugging

本文关键字:问题 调试      更新时间:2023-09-26

我对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行是白色和黑色的,这是应该的。Sooo,最后我的问题是如何做对,或者我应该采取完全不同的方法。我希望有人能帮助我。(我不是以英语为母语的人。也许你可以原谅某些错误。)

根据此页面,&&||之前评估,因此,以下条件

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

等同于

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

但我认为你的条件看起来更像下面的

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

只需添加perens