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

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 >
    <!-- Whole Container -->

    <div >
      <!-- Top-section Container (will be in 2 rows) -->
      <div>
        <div >
          <!-- move to Top Container -->
          <button id="topMoveBtn" >⏫</button>
        </div>
        <div >
          <!-- Top Button Container -->
          <button id="topLeftBtn">