Цикл for с пошаговой итерацией на javascript

#javascript #jquery #циклы

Подскажите, как исправить код, чтобы при каждом клике по btn_refresh запускался цикл
и в консоле выводился результат. Т.е. первый клик > выводит "one", второй клик > выводит
"two", третий клик > выводит "three".

В данный момент выводятся одновременно 3 варианта.

    var btn_refresh=$("#review__content__refresh"),
        fullReviewArray=[0,1,2];

    btn_refresh.click(function(){  
      for(var i = 0; i < 3; i++) 
    {if(i==0){
             console.log("one");
    }
    else if(i==1){
             console.log("two");
    }
    else if(i==2){
             console.log("three");
    } 
    }//конец for
    });//конец click to btn_refresh

    

Ответы

Ответ 1

Непонятно, зачем цикл.



var btn_refresh = $("#review__content__refresh");
btn_refresh.click(function() {
  var counter = this.clickCounter;
  if (counter)
    this.clickCounter = counter + 1;
  else
    this.clickCounter = 1;

  if (this.clickCounter > 3)
    this.clickCounter = 1;

  switch (this.clickCounter) {
    case 1:
      console.log("one");
      break;
    case 2:
      console.log("two");
      break;
    case 3:
      console.log("three");
      break;
    default:
      console.log("not in [1,2,3]");
  }
}); //конец click to btn_refresh




Ответ 2

Можно еще и так:



'use strict';
function* num() {
  var values = ['one', 'two', 'three'];
  var i = 0;
  while (i < 3) {
    yield values[i];
    i++
  }
}

function showNext() {
  console.log(iterator.next().value);
}

const iterator = num();



Ответ 3

на native js если интересно с использованием делегирования событий - http://codepen.io/tokamame/pen/rmzzOK?editors=1010



document.addEventListener("load", onLoad());

var but = document.getElementById('button');
var clear = document.getElementById('clear');
var out = document.getElementById('output');
var counter = 1;

function onLoad() {
  document.addEventListener("click", showClick);
}

function showClick(e) {
  if (e.target.innerHTML === "Кликни меня") {
    out.innerHTML = 'Вы нажали на кнопку "Кликни меня" ' + counter + ' раз';
    counter++;
  } else if (e.target.innerHTML === "Очистить счетчик") {
    out.innerHTML = 'Вы ни разу ни кликали';
    counter = 1;
  } else {
    console.log('Что-то пошло не так');
  }
}


Вы ни разу ни кликали


Ответ 4

Ещё вариант)



let btn = document.querySelector('button');
let out = document.querySelector('output');

btn.addEventListener('click', function() {
  let i = btn.i || 0;
  console.log(`${i%3+1} ticks`)
  btn.i = ++i;
});








С one/two/three:  



let btn = document.querySelector('button');
let out = document.querySelector('output');
let map = ['one', 'two', 'three'];
btn.i = 0;
btn.addEventListener('click', function() {
  btn.i %= 3;
  console.log(map[btn.i++])
});