Tell me how to fix the code so that with each click on btn_refresh a cycle is started and the result is displayed in the console. Those. first click> displays "one", second click> displays "two", third click> displays "three".

At the moment, 3 options are displayed simultaneously.

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
  • one
    need to abandon the cycle - Grundy

4 answers 4

It is not clear why the cycle.

 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 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="review__content__refresh">Refresh</button>

  • need to like in a loop. one-two-three-one-two-three, etc. So I thought that for is needed here. Little experience. Maybe I'm wrong. - Highmore
  • @Highmore It is possible and in the pace of the waltz: one-two-three, one-two-three. See the addition in the answer. - Igor

You can also like this:

 '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(); 
 <input type="button" value="click me" onclick="showNext();"/>

    native js if interested using event delegations - 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('Π§Ρ‚ΠΎ-Ρ‚ΠΎ пошло Π½Π΅ Ρ‚Π°ΠΊ'); } } 
     <button id="button">Кликни мСня</button> <button id="clear">ΠžΡ‡ΠΈΡΡ‚ΠΈΡ‚ΡŒ счСтчик</button> <div id="output">Π’Ρ‹ Π½ΠΈ Ρ€Π°Π·Ρƒ Π½ΠΈ ΠΊΠ»ΠΈΠΊΠ°Π»ΠΈ</div>

    • Nothing went wrong, I just clicked past the button. ;) - vp_arth
    • switch(e.target){case but: ... case clear: ...} would look more organic. - vp_arth

    Another option)

     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; }); 
     <button type=button>Click</button> <output></output>

    With 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++]) }); 
     <button type=button>Click</button> <output></output>