Question

我是javascript的新手，我正在学习更多关于HTML5，Javascript和CCS3的内容。

我的任务是：

创建一个国际象棋棋盘，用JavaScript编写单元格（8x8），然后使用nth-child更改CSS中的背景颜色。

正如你所看到的，我已经做到了，我不知道我是否已经做得很好，但我现在要添加一个改变侧面（黑色和白色边）的按钮。我试图通过使用布尔值创建var来解决它，如果它是真的它将加载一个函数，如果它是假的另一个。它适用于加载页面，但更改按钮不起作用。我做错了什么？

enter image description here

HTML和JavaScript：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="ccsO2.css">



    </head>
<body>

<h1>Sjakkbrett</h1>

<script>

    var truefalse = true;

    function changer(){
        if(truefalse === true){
            truefalse = false;
        } else{
        truefalse = true;
    }
    }

    var svartbrikke = new Array();
    svartbrikke [0] = "&#9820";
    svartbrikke [1] = "&#9822";
    svartbrikke [2] = "&#9821";
    svartbrikke [3] = "&#9819";
    svartbrikke [4] = "&#9818";
    svartbrikke [5] = "&#9821";
    svartbrikke [6] = "&#9822";
    svartbrikke [7] = "&#9820";
    svartbrikke [8] = "&#9823";

    var hvitbrikke = new Array();
    hvitbrikke [0] = "&#9814";
    hvitbrikke [1] = "&#9816";
    hvitbrikke [2] = "&#9815";
    hvitbrikke [3] = "&#9813";
    hvitbrikke [4] = "&#9812";
    hvitbrikke [5] = "&#9815";
    hvitbrikke [6] = "&#9816";
    hvitbrikke [7] = "&#9814";
    hvitbrikke [8] = "&#9817";

    if(truefalse === true){

    document.write('<table>');
    for(var i = 0; i < 8; i++){

            document.write('<tr align="center">');
        for(var j = 0; j < 8; j++){

            if(i === 0){
                document.write('<td>' + svartbrikke[j] + '</td>');
            }
            if(i === 1){
                document.write('<td>' + svartbrikke[8] + '</td>');
            }
            if(i === 6){
                document.write('<td>' + hvitbrikke[8] + '</td>');
            }
            if(i === 7){
                document.write('<td>' + hvitbrikke[7 - j] + '</td>');
            } 
            else if(i >= 2 && i <= 5) {
            document.write('<td> </td>');
            }
        }
        document.write('</tr>');
    }
    document.write('</table>');
    } else {

    document.write('<table>');
    for(var i = 0; i < 8; i++){

            document.write('<tr align="center">');
        for(var j = 0; j < 8; j++){

            if(i === 0){
                document.write('<td>' + hvitbrikke[j] + '</td>');
            }
            if(i === 1){
                document.write('<td>' + hvitbrikke[8] + '</td>');
            }
            if(i === 6){
                document.write('<td>' + svartbrikke[8] + '</td>');
            }
            if(i === 7){
                document.write('<td>' + svartbrikke[7 - j] + '</td>');
            } 
            else if(i >= 2 && i <= 5) {
            document.write('<td> </td>');
            }
        }
        document.write('</tr>');
    }
    document.write('</table>');
    }


</script>
<button onclick="changer();"> Bytt side</button>
</body>
</html>

CSS：

root { 
    display: block;
}

table{
    background-color: lightgray;


}



tr:nth-child(2n+1) > td:nth-child(2n){
    content: center;
    background-color: white;
    box-sizing: border-box; 
    width: 40px;
    height: 40px;



}

tr:nth-child(2n) > td:nth-child(2n+1){
    content: center;
    background-color: white;
    box-sizing: border-box; 
    width: 40px;
    height: 40px;


}

Answer 1

在呈现页面后，您无法使用document.write()。

使用：

innerHTML

或

DOM methods

在呈现页面后更改/添加/删除页面元素。

Answer 2

您更改了变量，但检查它的代码已经运行，您不会重新运行它。

为什么我的更改按钮不起作用？

2 个答案: