我試圖以幾種不同的方式改變這一點 ( if (currentView === theCube[x])) 試圖用 while 陳述句迭代它。但是我在下面使用的方法在前兩輪運行良好，但在最后一輪停止運行。我已經把它帶到 Code pen 并安慰了它的值，currentView它確實增加了，但網格并沒有像以前那樣改變顏色（變成白色）。
這是專案的代碼筆
片段也在下面：
const topMoveBtn = document.getElementById('topMoveBtn')
const rightMoveBtn = document.getElementById('rightMoveBtn')
const leftMoveBtn = document.getElementById('leftMoveBtn')
const botMoveBtn = document.getElementById('botMoveBtn')
const grid = document.getElementById('grid-container')
let x = 0
let y = 0
let squares = []
let frontView = [0, 0, 0, 0, 0, 0, 0, 0, 0]
let bottomView = [1, 1, 1, 1, 1, 1, 1, 1, 1]
let backView = [2, 2, 2, 2, 2, 2, 2, 2, 2]
let topView = [3, 3, 3, 3, 3, 3, 3, 3, 3]
let leftView = [4, 4, 4, 4, 4, 4, 4, 4, 4]
let rightView = [5, 5, 5, 5, 5, 5, 5, 5, 5]
let currentView = frontView
let theCube = [
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 1, 1, 1, 1, 1, 1, 1, 1],
[2, 2, 2, 2, 2, 2, 2, 2, 2],
[3, 3, 3, 3, 3, 3, 3, 3, 3],
[4, 4, 4, 4, 4, 4, 4, 4, 4],
[5, 5, 5, 5, 5, 5, 5, 5, 5]
]
/* Color Mappings:
0 = Red,
1 = Yellow,
2 = Orange,
3 = White,
4 = Green,
5 = Blue
*/
topMoveBtn.addEventListener('click', function() {
if (x === 0) {
x
currentView = theCube[x]
makeGrid()
} else if (x === 1) {
x
currentView = theCube[x]
makeGrid()
} else if (x === 2) {
x
currentView = theCube[x]
makeGrid()
} else if (x === 3) {
return x = 0
}
})
function makeGrid() {
for (let i = 0; i < currentView.length; i ) {
const square = document.createElement('div')
grid.appendChild(square)
squares.push(square)
if (currentView[i] === 0) {
squares[i].classList.add('squareR')
} else if (currentView[i] === 1) {
squares[i].classList.add('squareY')
} else if (currentView[i] === 2) {
squares[i].classList.add('squareO')
} else if (currentView[i] === 3) {
squares[i].classList.add('squareW')
} else if (currentView[i] === 4) {
squares[i].classList.add('squareG')
} else if (currentView[i] === 5) {
squares[i].classList.add('squareB')
}
}
}
makeGrid()body {
min-width: 800px;
}
button {
padding: 0;
margin: 20px;
transform: scale(1.3);
border: none;
}
header {
display: block;
border-bottom: 1px solid black;
}
.all-view-container {
display: flex;
justify-content: space-around;
}
.bottom-move-container,
.top-move-container,
.left-move-container,
.right-move-container,
.middle-container,
.bottom-button-container,
.top-button-container {
display: flex;
justify-content: center;
}
.left-middle-button,
.right-middle-button {
margin-top: 110px;
margin-bottom: 110px;
}
.left-top-button,
.right-top-button {
margin-top: 45px;
}
.top-middle-button,
.bottom-middle-button {
margin-left: 105px;
margin-right: 105px;
}
.left-move-button,
.right-move-button {
margin-top: 105px;
height: 200px;
}
.top-move-button,
.bottom-move-button {
width: 200px;
border: visible;
}
.bottom-move-button {
margin-bottom: 50px;
border: visible;
}
.grid-container {
display: grid;
grid-template-rows: 140px 140px 140px;
grid-template-columns: 140px 140px 140px;
}
.mini-grid-container {
display: grid;
grid-template-rows: 80px 80px 80px;
grid-template-columns: 80px 80px 80px;
}
.squareR,
.squareY,
.squareW,
.squareG,
.squareB,
.squareO {
border: 1px solid black;
display: flex;
justify-content: center;
}
.squareR {
background: red;
}
.squareY {
background: yellow;
}
.squareW {
background: white;
}
.squareG {
background: green;
}
.squareB {
background: blue;
}
.squareO {
background: orange;
}
.whole-container {
margin-top: 40px;
}<body>
<div class="whole-container">
<!-- Whole Container -->
<div class="top-container">
<!-- Top-section Container (will be in 2 rows) -->
<div>
<div class="top-move-container">
<!-- move to Top Container -->
<button id="topMoveBtn" class="top-move-button">?</button>
</div>
<div class="top-button-container">
<!-- Top Button Container -->
<button id="topLeftBtn">??</button><button id="topMidBtn" class="top-middle-button">??</button><button id="topRightBtn">??</button>
</div>
</div>
</div>
<!-- End of Top Container -->
<div class="middle-container">
<!-- Middle Section Container (will be in 5 columns) -->
<div>
<div class="left-move-container">
<!-- move to Left Container -->
<button id="leftMoveBtn" class="left-move-button">?</button>
</div>
</div>
<div class="left-button-container">
<!-- Left Button Container -->
<div>
<button id="leftTopBtn" class="left-top-button">??</button>
</div>
<div>
<button id="leftMidBtn" class="left-middle-button">??</button>
</div>
<div>
<button id="leftBotBtn">??</button>
</div>
</div>
<!-- Grid for game -->
<div class="grid-container" id="grid-container">
</div>
<!-- Grid for game -->
<div class="right-button-container">
<!-- Right Button Container -->
<div>
<button id="rightTopBtn" class="right-top-button">??</button>
</div>
<div>
<button id="RightMidBtn" class="right-middle-button">??</button>
</div>
<div>
<button id="RightBotBtn">??</button>
</div>
</div>
<div class="right-move-container">
<!-- move to Right Container -->
<button id="rightMoveBtn" class="right-move-button">?</button>
</div>
</div>
<div class="bottom-container">
<!-- Bottom Section Container (will be in 2 rows (like top-container)) -->
<div class="bottom-button-container">
<!-- Bottom Button Container -->
<button id="botLeftBtn">??</button><button id="botMidBtn" class="bottom-middle-button">??</button><button id="botRightBtn">??</button>
</div>
<div class="bottom-move-container">
<!-- move to bottom Container -->
<button id="botMoveBtn" class="bottom-move-button">?</button>
</div>
</div>
<!-- End of Bottom Container -->
</div>
<!-- End of Whole Container -->
<script type="text/javascript" src="index.js"></script>
</body>
</html>uj5u.com熱心網友回復：
問題是你一直在添加類。你永遠不會洗掉舊的類。
第一個“class1”
第二個：“class1 class2”
第三次呼叫“class1 class2 class3”
您需要洗掉其他類
squares[i].classList.remove('squareR', 'squareY', 'squareO');
uj5u.com熱心網友回復：
我console.log在里面放了一個宣告else if (x === 3)：
else if (x === 3) {
console.log(x)
return x = 0
}
我能夠在控制臺中看到 x 已注銷。這似乎達到了第三個說法。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/390294.html
標籤：javascript html css