+ 2
Multiple click on an element
How would you make an element to execute function 1 when you click it and then function 2 when you click it again then function 3 when you click it again in pure javascript?
5 ответов
0
var funcs = [hello];
var clicks = 0;
function clicked() {
    if(clicks < funcs.length) {
        funcs[clicks]("hello");
        clicks++;
    }
}
function hello() {
    alert("hello")
}
+ 3
I dont know a lot of about JS but I think u can do it with statements.
+ 3
Using closure, without global counting click variable needed.
HTML:
<button onclick="multiClick()">Multi function call button</button>
Javascript:
const multiClick = function() {
    let count = 0;
    const funct1 = function() {
        alert("funct1 called")
    }
    const funct2 = function() {
        alert("funct2 called")
    }
    const funct3 = function() {
        alert("funct3 called")
    }
    
    const nextCount = function() {
            if(count===1) funct1();
            else if(count===2) funct2();
            else funct3();
    }
        
    return function() {
            count=count===2?0:count+1;
            nextCount();
        }
    
}();
https://code.sololearn.com/WJ8acc1MEnlW/?ref=app
+ 2
This allows to call the functions round and round:
<!DOCTYPE html>
<html>
  <head>
    <title>The 3 Musketeers</title>
    <script>
var clicks = 0;
var funcs = [f1, f2, f3];
function clicked(){
  funcs[clicks]();
  clicks = (clicks == 2 ? 0 : ++clicks);
}
function f1(){
  console.log("Athos");
}
function f2(){
  console.log("Porthos");
}
function f3(){
  console.log("Aramis");
}
    </script>
  </head>
  <body>
    <button onclick="clicked()">* CLICK HERE *</button>
  </body>
</html>
+ 2
Thank you guys 😀



