Wie kann eine Schaltfläche unterschiedliche Ausgaben haben, wenn sie zum zweiten, dritten und vierten Mal mit einer switch-Anweisung angeklickt wird?

Ich versuche, eine Eingabetaste bei jedem Klicken anders reagieren zu lassen. Ich versuche, eine Reihe von Rastern zum Drehen zu bringen, wenn die Schaltfläche zum ersten Mal angeklickt wird, die zweite Reihe zum Drehen, wenn die Schaltfläche zum zweiten Mal angeklickt wird, und so weiter. Ich habe versucht, eine switch-Anweisung zu verwenden, aber ohne Erfolg, könnte mir bitte jemand helfen?

Mein 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>

Mein 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);
 }
}

Mein 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;
 }
 
}}

Vollständiger Code hier: https://code.sololearn.com/WX59M6HHngc5
Vielen Dank im Voraus

Lösung des Problems

Sie müssen die Anzahl außerhalb des Funktionskörpers speichern:

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;
 };
})();

Mein bevorzugter Weg, dies zu erreichen, ist ein Abschluss, der mit einem IIFE erstellt wird.

Beispiel:

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>