时间戳

首页 > 解决方案 > 在 Javascript 中切换 [吐出相同的值]

javascript - 在 Javascript 中切换 [吐出相同的值]

问题描述

除了因为在 JS 中更改 DOM 元素而对我产生的仇恨之外，我觉得我被 switch 欺骗了。

我从来没有遇到过它的问题，但这次每次我调用该函数时它都会在控制台中轻松吐出。

var opt = 0;

var arr = ['easy','medium','high'];

function difficulity(){
switch(opt){
case 0:
case 1:
  console.log(arr[opt]);
  document.getElementById("diffArr").innerHTML = arr[opt];
  opt = opt++;
  break;
case 2:
  console.log(arr[opt]);
  document.getElementById("diffArr").innerHTML = arr[opt];
  opt = 0;
  break;
} 
};

如您所见，我希望代码更改元素内的文本，并且控制台总是说这很“简单”，即使每次调用函数时 opt 变量都应该更改。

提前感谢您的帮助，如果我搞砸了，请告诉我。

标签： javascriptswitch-statement

解决方案

问题在这里：

opt = opt++;

这递增opt一（在右侧），然后将初始值分配opt给opt（在左侧）。这就是后增量的作用：

如果使用后缀，操作数后面有运算符（例如，x++），则返回递增前的值。

当使用 递增++或递减时--，您不需要（也不应该）将结果分配给同一个变量 - 只需++单独使用。例如：

case 1:
  console.log(arr[opt]);
  document.getElementById("diffArr").innerHTML = arr[opt];
  opt++;
  break;


var opt = 0;

var arr = ['easy', 'medium', 'high'];

function difficulity() {
  switch (opt) {
    case 0:
    case 1:
      console.log(arr[opt]);
      document.getElementById("diffArr").innerHTML = arr[opt];
      opt++;
      break;
    case 2:
      console.log(arr[opt]);
      document.getElementById("diffArr").innerHTML = arr[opt];
      opt = 0;
      break;
  }
};
<div id="diffArr"></div>
<div onclick="difficulity()">click</div>

但是switch有点冗长且容易出错 - 您可能会考虑只使用数组查找：

var opt = 0;
var arr = ['easy', 'medium', 'high'];
const diffArr = document.getElementById("diffArr");
function difficulity() {
  diffArr.textContent = arr[opt++ % arr.length];
}
<div onclick="difficulity()">click</div>
<div id="diffArr"></div>

推荐阅读