javascript if/else 语句适用于前两个语句，但在第三个语句停止？
[英]javascript if/else statement works for first two statements but stops on the third?
问题描述
I have attempted to change this in several different ways ( if (currentView === theCube[x]) ) tried to iterate over it with a while statement.
我试图用几种不同的方式来改变它（ if (currentView === theCube[x]) ）试图用一个while语句来迭代它。 But the method I have used below works fine for the first two rounds but then stops functioning on the last round.但是我在下面使用的方法在前两轮运行良好，但在最后一轮停止运行。 I have taken it to Code pen and consoled out the value of currentView and it does increase as it should, but the grid does not change colors (to white) as it was in previous.我已经把它带到了代码笔上并安慰了currentView的值，它确实增加了，但是网格没有像以前那样改变 colors （变为白色）。
Here is code pen of the project这是项目的代码笔
Snippet also below:片段也在下面：
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>
2 个解决方案
解决方案1
0 2021-12-22 14:58:41
I put a console.log statement inside the else if (x === 3) like so:我在else if (x === 3)中放置了一个console.log语句，如下所示：
else if (x === 3) {
console.log(x)
return x = 0
}
I was able to see x logged out in the console.我能够看到 x 在控制台中注销。 This seems to be reaching the third statement.这似乎达到了第三个声明。
解决方案2
0 2021-12-22 15:02:10
The problem is you keep adding classes.问题是您不断添加课程。 You never remove the old classes.您永远不会删除旧课程。
First "class1"第一个“class1”
Second: "class1 class2"第二：“class1 class2”
Third call "class1 class2 class3"第三次调用“class1 class2 class3”
You need to remove the other classes您需要删除其他类
squares[i].classList.remove('squareR', 'squareY', 'squareO');
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
嵌套 if else 语句仅适用于第一个语句 - Nested if else statements only works on first statement
Javascript else if 语句意外停止执行 - Javascript else if statement stops executing unexpectedly
如何将第三个 javascript else if 语句添加到按钮？ - How to add a third javascript else if statement to a button?
javascript- if / else，用于switch语句中的语句 - javascript- if/else, for statements inside a switch statement
在 JavaScript 的机会游戏中，如果语句没有移动到 else 语句 - If statements not moving to the else statement in a game of chance in JavaScript
两个 else-if 语句导致 javascript 中的错误 - Two else-if statements result in errors in javascript
JavaScript If语句有效，但Else没有 - JavaScript If statement works, but Else doesn't
Javascript验证无法正常工作-只要if语句为真，它就会停止所有if语句？ - Javascript validation is not working - as soon as one if statement is true, it stops all if statements?
js对象和if语句。 为什么此代码在没有else且不使用else或else if语句的情况下有效？ - js objects and if statements. why this code works without an else and using an else or else if statement doesn't?
ONclick 按钮，两个表达式，在 ELSE 语句中出错，但在 if 语句中有效 - ONclick button, two expressions , getting errors in ELSE statement but works in if statement
相关标签