我是 javascript 的新手，我正在学习更多关于 HTML5、Javascript 和 CCS3 的知识。
我被赋予的任务:
创建一个棋盘，使用 JavaScript 编写单元格 (8x8)，然后使用 nth-child 更改 CSS 中的背景颜色。
如你所见，我已经做到了，我不知道我是否做得很好，但我现在要添加一个改变边(黑色和白色边)的按钮。我试图通过创建具有 bool 值的 var 来解决它，如果它是 true 它将加载一个函数，如果它是 false 另一个。它在加载页面时有效，但更改按钮不起作用。我做错了什么？
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] = "♜";
svartbrikke [1] = "♞";
svartbrikke [2] = "♝";
svartbrikke [3] = "♛";
svartbrikke [4] = "♚";
svartbrikke [5] = "♝";
svartbrikke [6] = "♞";
svartbrikke [7] = "♜";
svartbrikke [8] = "♟";
var hvitbrikke = new Array();
hvitbrikke [0] = "♖";
hvitbrikke [1] = "♘";
hvitbrikke [2] = "♗";
hvitbrikke [3] = "♕";
hvitbrikke [4] = "♔";
hvitbrikke [5] = "♗";
hvitbrikke [6] = "♘";
hvitbrikke [7] = "♖";
hvitbrikke [8] = "♙";
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;
}
最佳答案
关于javascript - 为什么我的更改按钮不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21599691/