New course! Every coder should learn Generative AI!
Try a free lesson+ 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 Answers
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 😀
Often have questions like this?
Learn more efficiently, for free:
Hot today
Strange narrowing conversion error from FLTK Color to Color Struct, Stroustrup's header Graph.h
0 Votes
Effects on HTML and JavaScript
0 Votes
Encryption and Decryption
1 Votes
Izzy the iguana
0 Votes
Any good alternative to do this
2 Votes
Can anyone help me with this?
0 Votes