Loop function executed onclick JavaScript

Question

Hi guys i'm trying to create a loop function so that each time the button is clicked the content will change. Where am I going wrong? right now it's going to changeTestimonial2 when I click the button (the last in the loop)

function arrayOfTestimonials() {
    var arrayOfFunctions = [];
    arrayOfFunctions.push(changeTestimonial);
    arrayOfFunctions.push(changeTestimonial1);
    arrayOfFunctions.push(changeTestimonial2);

    for (var i = 0; i < arrayOfFunctions.length; ++i) {
        arrayOfFunctions[i](); // run your function
    }
}

i'm trying to loop through each different function I have made on each click on the same button, does that make sense? — ryan.
– ryan., Commented Feb 16, 2021 at 17:04
Function by function? Because in your code the arrayOfTestimonials() function will call everything at once. — Samir Ribeiro
– Samir Ribeiro, Commented Feb 16, 2021 at 18:01

Samir Ribeiro · Accepted Answer · 2021-02-16 18:19:41Z

The way you wrote this code, it should work. I made the test...

code

<body>
    <script type="text/javascript">
        console.log("test");

        var fun1 = function(){
            console.log("fun1");
        }

        var fun2 = function(){
            console.log("fun2");
        }

        var fun3 = function(){
            console.log("fun3");
        }

        function arrayOfTestimonials() {
            var arrayOfFunctions = [];
            arrayOfFunctions.push(fun1);
            arrayOfFunctions.push(fun2);
            arrayOfFunctions.push(fun3);

            for (var i = 0; i < arrayOfFunctions.length; ++i) {
                arrayOfFunctions[i](); // run your function
            }
        }

        arrayOfTestimonials();
    </script>
</body>

output

test
fun1
fun2
fun3

If you want to call function by function, you should do something like this...

<body>
    <button onclick="onClickButton()">click me!</button>
    <h2 id="title">No function has been called!</h2>

    <script type="text/javascript">
        var functionNumber = 1;

        var fun1 = function(){
            document.getElementById("title").innerHTML = "Function 1 has been called!";
        }

        var fun2 = function(){
            document.getElementById("title").innerHTML = "Function 2 has been called!!";
        }

        var fun3 = function(){
            document.getElementById("title").innerHTML = "Function 3 has been called!!!";
        }

        function onClickButton(){
            if(functionNumber === 1){
                fun1();
                functionNumber++;
            }else if(functionNumber === 2){
                fun2();
                functionNumber++;
            }else if(functionNumber === 3){
                fun3();
                functionNumber = 1;
            }
        }
    </script>
</body>

Collectives™ on Stack Overflow

Loop function executed onclick JavaScript

1 Answer 1

code

output

If you want to call function by function, you should do something like this...

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

code

output

If you want to call function by function, you should do something like this...

Comments

Your Answer

Sign up or log in

Post as a guest

Related