CODEWITHSUNDEEP
javascript
Max0815
Max0815

Reputation: 127

How to code a button that only works when clicked multiple times

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.

Upvotes: 1

Views: 842

Answers (6)

Matt
Matt

Reputation: 324

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);

Upvotes: 0

ibrahim mahrir
ibrahim mahrir

Reputation: 31692

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>

Upvotes: 2

JhWebDev
JhWebDev

Reputation: 402

    //create a variable to check how many times the button has been clicked
    var buttonClick = 0;

    function CheckCount() {
        //Check if the buttonClick variable is three
        if (buttonClick == 3) {
            //if it is equal to three, display the screen and play the sound
            
            //below commented out for sake of demo
            //setScreen("TrollScreen");
            //playSound("sound://default.mp3", false);
            document.getElementById('buttonclickcount').innerHTML = "You clicked it three times";

        } else {
        //if it is not so, then increment the buttonClick variable by 1
        buttonClick++
      
      //so you can see how many times the button has been clicked 
      document.getElementById('buttonclickcount').innerHTML = buttonClick;
      }
    };
<!--I would create an onclick event on the button itself that runs a function when -->
<button onclick="CheckCount()">You Win!</button>

<div id="buttonclickcount"></div>

Upvotes: 0

Marc Sloth Eastman
Marc Sloth Eastman

Reputation: 801

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 ++;
});

Upvotes: 0

Velimir Tchatchevsky
Velimir Tchatchevsky

Reputation: 2815

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++;
    }
});

Upvotes: 3

jason.dachman
jason.dachman

Reputation: 34

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!

Upvotes: 0

Related Questions