Ufdjrw

I am trying to code a simple quiz app. I am trying to put a hidden screen at the end when one clicks on a button 3 times at the end. This is what I have tried:

for (var i = 0; i > 2; i++) 
 onEvent("button26", "click", function() 
 setScreen("TrollScreen");
 playSound("sound://default.mp3", false);
 );

I am fairly new to code, and I'm not sure how to do this. Help is appreciated.

You need to keep the count of the clicks outside of the event handler. Then inside it you can check that value and show the screen or increase the counter accordingly.

var count = 0;
onEvent("button26", "click", function()
 if(count > 2)
 setScreen("TrollScreen");
 playSound("sound://default.mp3", false);
 else
 count++;
 
);

Since all DOM elements are actually objects, you can attach a property to them that will serve as a counter, thus when a button gets clicked, you increment that property by 1 and then check if it reached 3 already.

A more subtle approach is to use a helper function that attaches the event and set up the counter as a closured variable, here is how:

function attachEventWithCounter(elem, func, maxClickCount) 
 let count = 0;
 elem.addEventListener("click", function(e) 
 count++;
 if(count >= maxClickCount) 
 func.call(this, e);
 // and probably reset 'count' to 0
 
 );

You can then use it like so:

attachEventWithCounter(myButton, myEventListener, 3);

attachEventWithCounter just takes a DOM element, a function that will serve as the event listener and a number that will be the maximum amount of tries. It then attaches a click event listener (you could pass in the type of the event as well if you want) and then whenever that event happens, it increments a locally declared variable count (initially set to 0) and checks if it reached the maximum amount of tries, if so it just calls the function passed as parameter (using Function#call to pass a custom this and the event argument to mimic the actual event listener).

Example:

function attachEventWithCounter(elem, func, maxClickCount) 
 let count = 0;
 elem.addEventListener("click", function(e) 
 count++;
 if(count >= maxClickCount) 
 func.call(this, e);
 count = 0;
 
 );



let btn = document.getElementById("myButton");

function listener() 
 alert("Clicked at last!!!");


attachEventWithCounter(btn, listener, 3);

<button id="myButton">Click me 3 times</button>

this will click the button three times every time you press it (at least I think). instead, make a counter variable that starts at 0 and increment it up by 1 each time the button is pressed. the put the action you want to perform inside in an if statement ie

if(counter >= 3)
//do some action
 

hope that helps!

you want to keep a counter variable outside the scope of the event to keep track of how many times it was clicked. Ex.

let counter = 0;
onEvent("button26", "click", function() 
 if(counter >= 3) 
 setScreen("TrollScreen");
 playSound("sound://default.mp3", false);
 
 counter ++;
);

You should look at using closures. This is where you define a variable before returning a function; your returned function closes around this variable. You could do something like in this fiddle.

const button = document.getElementById('button');
const output = document.getElementById('output');

const click = (function() 
 let count = 0;
 return function() 
 count++;
 if(count > 3) 
 output.innerHTML = 'Count is greater than 3: ' + count
 
 
)();

button.addEventListener('click', click);