如何使用 switch 语句使按钮在第二次、第三次和第四次单击时具有不同的输出？

Question

我试图让输入按钮在每次被点击时都有不同的反应。我试图在第一次单击按钮时使一行网格旋转，在第二次单击按钮时使第二行旋转，依此类推。我一直在尝试使用 switch 语句，但没有成功，有人可以帮助我吗？

我的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>

我的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);
  }
}

我的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;
  }
  
}}

完整代码在这里：https://code.sololearn.com/WX59M6HHngc5 提前谢谢你

Answer 1

您必须将计数存储在函数体之外：

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

我首选的实现方式是 closure created using a IIFE。

示例：

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>

如何使用 switch 语句使按钮在第二次、第三次和第四次单击时具有不同的输出？

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

html

javascript

css

dom

switch-statement