Javascript - How can i loop this JS function?

Bene
December 10, 2023
285 views
0 votes
2 Answers

I am relatively new to JS and i need help on this function
I want to loop the following function so that the counter starts from 0 everytime it counted to 4. I’ve looked through the internet but could’nt find anything and would be very happy if someone can help me with this:

onload = init;

function init() {
    var onclick = clickUpdates();
    var btn = document.getElementById("NOButton");
    btn.addEventListener("click", onclick, false);
}
function clickUpdates() {
    var count = 0;
    var next = function() {
        switch(count) {
            case 0:
            // function click 1 here
            card1.style.transitionDuration = '1.2s';
            card1.style.transform = 'translate(-1000px, -200px)';
            card1.style.zIndex = '4';
            function moveCard() {
                var card1 = document.querySelector('.card1');
                var card2 = document.querySelector('.card2');
                var card3 = document.querySelector('.card3');
                setTimeout(function() {
                  setTimeout(function() {
                  card1.style.transitionDuration = '1.2s';
                  card1.style.transform = 'translate(0px, -100px)';
                }, 100);
                  card2.style.transitionDuration = '1.2s';
                  card2.style.transform = 'translate(0px, 50px)';
                  card2.style.zIndex = '3';
                  card3.style.transitionDuration = '1.2s';
                  card3.style.transform = 'translate(0px, 50px)';
                  card3.style.zIndex = '2';
                  card1.style.zIndex = '1';
                }, 10);
              }
              moveCard()
            break;
            case 1:
            // function click 2 here
            function moveCard2() {
                var card1 = document.querySelector('.card1');
                var card2 = document.querySelector('.card2');
                var card3 = document.querySelector('.card3');
                card2.style.transform = 'translate(-1000px, -200px)';
                card2.style.zIndex = '1';
                setTimeout(function() {
                    setTimeout(function() {
                        card2.style.transitionDuration = '1.2s';
                        card2.style.transform = 'translate(0px, -50px)';  
                    }, 100);        
                  card3.style.transitionDuration = '1.2s';
                  card3.style.transform = 'translate(0px, 100px)';
                  card3.style.zIndex = '3';
                  card1.style.transitionDuration = '1.2s';
                  card1.style.transform = 'translate(0px, -50px)';
                  card1.style.zIndex = '2';
                  card2.style.zIndex = '2';
                }, 10);
              }
              moveCard2()
            break;
            case 2:
            // function click 3 here
            function moveCard3() {
                var card1 = document.querySelector('.card1');
                var card2 = document.querySelector('.card2');
                var card3 = document.querySelector('.card3');
                card3.style.transform = 'translate(-1000px, -200px)';
                card3.style.zIndex = '1';
                setTimeout(function() {
                    setTimeout(function() {
                        card3.style.transitionDuration = '1.2s';
                        card3.style.transform = 'translate(0px, 0px)';
                    }, 100);   
                  card1.style.transitionDuration = '1.2s';
                  card1.style.transform = 'translate(0px, 0px)';
                  card1.style.zIndex = '3';
                  card2.style.transitionDuration = '1.2s';
                  card2.style.transform = 'translate(0px, 0px)';
                  card2.style.zIndex = '2';
                  card3.style.zIndex = '1';
                }, 10);
              }
              moveCard3()
            break;
            case 3:
            // function click 4 here
            card1.style.transform = 'translate(-1000px, -200px)';
            moveCard()
            break;
            case 4:
            // function click 5 here
            moveCard2()
            break;
            case 5:
            // function click 6 here
            moveCard3()
            break;
            case 6:
            // function click 7 here
            card1.style.transform = 'translate(-1000px, -200px)';
            moveCard()
            break;
            default:
            // function click 1 here
            moveCard2()
            break;
            
            
        }
        count = count<7?count+1:7;
    }
    
    return next;
}

I am trying to loop this formula but i dont know how.

Tags: javascript

Answers

You simply need to step with modulo, that is:

count = (count + 1) % 7;

I have simplified your code to make it more readable as well as testable here, because you did not share the other resources your code relies upon. Please test the snippet below and if it works like you wanted, then just change the line where count is increased or set to 0 with the one I have shared above.

onload = init;

function init() {
    var onclick = clickUpdates();
    var btn = document.getElementById("NOButton");
    btn.addEventListener("click", onclick, false);
}
function clickUpdates() {
    var count = 0;
    var next = function() {
        switch(count) {
            case 0:
            console.log(0);
            break;
            case 1:
            console.log(1);
            break;
            case 2:
            console.log(2);
            break;
            case 3:
            console.log(3);
            break;
            case 4:
            console.log(4);
            break;
            case 5:
            console.log(5);
            break;
            case 6:
            console.log(6);
            break;
            default:
            break;
            
            
        }
        count = (count + 1) % 7;
    }
    
    return next;
}

<input id="NOButton" value="Click Here" type="button">

P.S. Given your code I inferred that your real intention is to 0 count when it would reach 7 and I infer that you only mentioned "4" instead of it due to the fact that "4" and "7" are very close to each-other on your Num Pad.

To make the function loop and reset the counter when it reaches a certain value, you can modify your next function to reset the counter when it reaches 4. Try this solution as well.

onload = init;

function init() {
    var onclick = clickUpdates();
    var btn = document.getElementById("NOButton");
    btn.addEventListener("click", onclick, false);
}

function clickUpdates() {
    var count = 0;
    
    var next = function() {
        switch (count) {
            // your cases here

            default:
                // your default case here
                break;
        }
        
        // Reset the counter when it reaches 4
        count = (count + 1) % 8; // Reset to 0 after reaching 7
    };

    return next;
}

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – How can i loop this JS function?

Answers