Still learning javascript. So, I want something like this:
when a user clicks on a button, action A is carried out.
When the user clicks on the same button again, action B (a different action) is carried out.
When the same user clicks on the button again, action C (a different) action is carried out.
Can this be done?
Sure. You could store a click-counter and increase it on every event execution, then based on that, execute a different set of commands.
Yes, just track the clicks. For example:
<button onclick='doAction()'>Click me</button>
<script>
let clickState = 0;
function doAction() {
clickState++;
if (clickState ==1 ) {
// Do something...
} else if (clickState == 2 ) {
// Do something...
} else if (clickState == 3 ) {
// Do something...
} else if (clickState == 4 ) {
// Do something...
// then reset clickState for the next go round
clickState=0;
}
}
</script>
One thing you can do is execute different functions depending on the number of times the button is clicked.
An example:
class ClickHandler {
constructor(ele){
//https://stackoverflow.com/questions/3781096/check-if-variable-is-a-valid-node-element
if(!ele.nodeType) throw new TypeError("Parameter passed is not a valid node");
this.element = button;
this.functions = [];
this.isListening = false;
this.functionOn = 0;
}
RegisterFunction(func){
if("function" !== typeof func){
throw new TypeError("Parameter passed in must be a function");
}
//You only want 5 functions, change "5" if you want more or less.
if(this.functions.length > 5){
throw new RangeError("Function limit exceeded");
}
this.functions.push(func);
}
StartListening(){
if(this.isListening) return;
this.isListening = true;
//Arrow functions don't have their own "scope", which is why this works.
this.element.addEventListener("click", () => {
if(!this.functions[this.functionOn]) this.functionOn = 0;
this.functions[this.functionOn]();
++this.functionOn;
});
}
}
This class allows you to register a button and execute different commands based off of how many times the button is clicked.
However, I see you want to do 5 different actions per each click. So, you can simply modify the class to this:
class ClickHandler {
constructor(ele){
//https://stackoverflow.com/questions/3781096/check-if-variable-is-a-valid-node-element
if(!ele.nodeType) throw new TypeError("Parameter passed is not a valid node");
this.element = button;
this.functions = [];
this.isListening = false;
}
RegisterFunction(func){
if("function" !== typeof func){
throw new TypeError("Parameter passed in must be a function");
}
//You only want 5 functions, change "5" if you want more or less.
if(this.functions.length > 5){
throw new RangeError("Function limit exceeded");
}
this.functions.push(func);
}
StartListening(){
if(this.isListening) return;
this.isListening = true;
//Arrow functions don't have their own "scope", which is why this works.
this.element.addEventListener("click", () => {
//Iterate over the registered functions and execute them.
this.functions.forEach(func => func());
});
}
}
How to use:
const handler = new ClickHandler(document.getElementById("IDOfMyButton"));
handler.RegisterFunction(function(){
console.log("It works! It better...");
});
handler.StartListening();
Note that this can also handle other HTML elements as well! You can also add functions after it is listening.
Right now you can start listening and add functions to execute, but you yourself can add things like removing functions, changeable function number limits and pausing the listening process.
Be creative - I encourage you to expand upon this!
