javascript if/else statement works for first two statements but stops on the third?

0

Issue

I have attempted to change this in several different ways ( if (currentView === theCube[x]) ) tried to iterate over it with a while statement. 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.

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>

Solution

The problem is you keep adding classes. You never remove the old classes.

First
"class1"

Second:
"class1 class2"

Third call
"class1 class2 class3"

You need to remove the other classes

 squares[i].classList.remove('squareR', 'squareY', 'squareO');

Answered By – epascarello

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More