爲什麼我的更改按鈕不起作用？

我對javascript很新，我正在學習更多關於HTML5，Javascript和CCS3的知識。爲什麼我的更改按鈕不起作用？

我一直在考慮的任務：

創造一個使用JavaScript編寫的細胞（8×8）一個國際象棋棋盤，然後用第n個孩子來改變背景顏色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; 


}

來源

2014-02-06 CronbachAlpha