How to make a button have different outputs when clicked the second, third, and fourth time with a switch statement?

Question

I am trying to make an enter button have different responses everytime it is clicked. I am trying to make one row of grids spin when the button is clicked the first time, the second row spin when the button is clicked the second time, and so on. I have been trying to use a switch statement, but to no success, could someone please help me?

My HTML:

<button onclick = "clickFunction(); ani();" class="key-button" id = "ENTER">ENTER</button>
    </div>

     <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo1"></div>
     <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo2"></div>
     <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo3"></div>
     <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo4"></div>
     <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo5"></div>
     <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo6"></div>
     <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo7"></div>
     <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo8"></div>
     <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo9"></div>
     <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo10"></div>

My CSS:

.container,
.container2 {
  display: grid;
  grid-template-columns: .2fr .2fr .2fr .2fr .2fr .2fr .2fr .2fr;
  grid-gap: 10px;
  text-align: center;
  text-transform: capitalize;
  position: relative;
  height: 1500px;
  width: 1500px;
  transform: translate(100%, 0%);
  transform: scale(0.6, 0.6);

}

.container div {
  background-color: black;
  text-align: center;
  text-transform: capitalize;
  padding-right: 450px;
}

.container div {
  background-color: black;
  color: white;
  font-size: 300px;
    text-align: center;
    text-transform: capitalize;
}

.container div::before {
  content: "";
  padding-bottom: 1%;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  text-transform: capitalize;

}

.container2 div::after {
  content: "";
  padding-bottom: 5%;
  display: block;
  text-align: center;
  text-transform: capitalize;
}

.container2 .text {
  position: absolute;
  text-align: center;
  text-transform: capitalize;

}

.container2 div {
  background-color: green;
  position: relative;
  overflow: hidden;
  text-align: center;
  text-transform: capitalize;
}
.classname {
  -webkit-animation-name: cssAnimation;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes cssAnimation {
  from {
    -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
  }
  to {
    -webkit-transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
  }
}

My Javascript:

function ani() {
  var count = 0;

  switch(count) {
  case 0:
  document.getElementById('amo1').className = 'classname';
  document.getElementById('amo2').className = 'classname';
  document.getElementById('amo3').className = 'classname';
  document.getElementById('amo4').className = 'classname';
  document.getElementById('amo5').className = 'classname';
  document.getElementById('amo6').className = 'classname';
  document.getElementById('amo7').className = 'classname';
  document.getElementById('amo8').className = 'classname';
  break;

  case 1:
  document.getElementById('amo9').className = 'classname';
  break;
  case 2:
  document.getElementById('amo10').className = 'classname';
  break;
  }
  
}}

Full code here: https://code.sololearn.com/WX59M6HHngc5 Thank you in advance

Answer 1

You have to store the count outside the function body:

const ani = (() => {
  var count = 0;
  return function() {
    switch (count) {
      case 0:
        document.getElementById('amo1').className = 'classname';
        document.getElementById('amo2').className = 'classname';
        document.getElementById('amo3').className = 'classname';
        document.getElementById('amo4').className = 'classname';
        document.getElementById('amo5').className = 'classname';
        document.getElementById('amo6').className = 'classname';
        document.getElementById('amo7').className = 'classname';
        document.getElementById('amo8').className = 'classname';
        break;

      case 1:
        document.getElementById('amo9').className = 'classname';
        break;
      case 2:
        document.getElementById('amo10').className = 'classname';
        break;
    }
    count = (count + 1) % 4;
  };
})();

My preferred way to achieve this, is a closure created using a IIFE.

Example:

const ani = (() => {
  var count = 0;
  return function() {
    switch (count) {
      case 0:
        document.getElementById('amo1').className = 'classname';
        document.getElementById('amo2').className = 'classname';
        document.getElementById('amo3').className = 'classname';
        document.getElementById('amo4').className = 'classname';
        document.getElementById('amo5').className = 'classname';
        document.getElementById('amo6').className = 'classname';
        document.getElementById('amo7').className = 'classname';
        document.getElementById('amo8').className = 'classname';
        break;

      case 1:
        document.getElementById('amo9').className = 'classname';
        break;
      case 2:
        document.getElementById('amo10').className = 'classname';
        break;
    }
    count = (count + 1) % 4;
  };
})();

document.querySelector('button').addEventListener('click', ani);

.classname {
  display: block;
  background-color: blue;
  height: 10px;
  width: 100px;
}

<div id="amo1"></div>
<div id="amo2"></div>
<div id="amo3"></div>
<div id="amo4"></div>
<div id="amo5"></div>
<div id="amo6"></div>
<div id="amo7"></div>
<div id="amo8"></div>
<div id="amo9"></div>
<div id="amo10"></div>

<button>Click</button>