Переключить в Javascript [плюет то же значение] - PullRequest
Новая
       8

Переключить в Javascript [плюет то же значение]

0 голосов
/ 11 июня 2018

Помимо ненависти, которую я нахожу на меня за изменение элементов DOM в JS, я чувствую, что меня обманули с помощью переключателя.

Никогда у меня не было проблем с этим, но на этот раз он выплевываетконсоль легко каждый раз, когда я вызываю функцию. 

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 должна меняться каждый раз, когда функциябудучи призванным

Заранее спасибо за помощь, дайте мне знать, если я что-то напутал.

Ответы [ 3 ]

0 голосов
/ 11 июня 2018

Проблема здесь: 

opt = opt++;

Это увеличивает opt на единицу (справа), а затем присваивает начальное значение opt opt (налево).Вот что делает postincrement:

Если используется postfix, с оператором после операнда (например, 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>
0 голосов
/ 11 июня 2018

Как уже объяснено, opt = opt++ в основном устанавливает его в текущее значение.opt++ будет делать то, что вы хотите.

Однако я бы порекомендовал избавиться от оператора switch, так как вы можете добиться точно такого же результата с этим ... 

var opt = 0;

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

function difficulty(){
    console.log(arr[opt]);
    document.getElementById("diffArr").innerHTML = arr[opt];
    opt = ++opt % arr.length;
}

// just run it 10 times to see the result.
for (var i = 0; i < 10; i++) {
  difficulty();
}
<div id="diffArr"></div>

Короче говоря, для этого задается вариант opt + 1 с этим .. 

opt = ++opt

, а затем используется оператор модулякоторый возвращает остаток после деления вашего числа на другое число, в данном случае это длина массива. 

opt = ++opt % arr.length;

Это означает, что вы можете добавлять вещи в массив или удалять их, и код все равно будетработайте по своему усмотрению, без необходимости что-либо изменять.

0 голосов
/ 11 июня 2018

opt = opt++; не будет работать

вы используете 

opt = opt + 1;

или 

opt++;

Надеюсь, это поможет 

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;
} 
};
<button onclick="difficulity()">Call function</button>
<p id="diffArr"></p>
...