Function activate after two onclicks

Question

Hey I'm using javascript+html only.

Is there any way to activate a function after the button has been clicked two (or more) times? I want the button to do NOTHING at the first click.

Answer 1

For a "doubleclick", when the user quickly presses the mouse button twice (such as opening a program on the desktop), you can use the event listener dblclick in place of the click event.

https://developer.mozilla.org/en-US/docs/Web/Reference/Events/dblclick

For a quick example, have a look at the below code. http://jsfiddle.net/jzQa9/ This code just creates an event listener for the HTMLElement of "item", which is found by using getElementById.

<div id="item" style="width:15px;height:15px;background-color:black;"></div>

<script>
    var item = document.getElementById('item');
    item.addEventListener('dblclick',function(e) {
        var target = e.target || e.srcElement;
        target.style.backgroundColor = 'red';
    },false);
</script>

As for wanting the user to click an element X times for it to finally perform an action, you can do the following. http://jsfiddle.net/5xbPG/ This below code works by adding a click tracker to the HTMLElement and incrementing the click count every time it's clicked. I opted to save the clicks to the HTMLElement instead of a variable, but either way is fine.

<div id="item" style="width:15px;height:15px;background-color:black;"></div>

<script>
    var item = document.getElementById('item');
    item.addEventListener('click',function(e) {
        var target = e.target || e.srcElement;
        var clicks = 0;
        if(target.clicks)
            clicks = target.clicks;
        else
            target.clicks = 0;
        if(clicks >= 4) {
           target.style.backgroundColor = 'red';
        }
        target.clicks += 1;
    },false);
</script>

== UPDATE ==

Since you recently posted a comment that you want two different buttons to be clicked for an action to happen, you would want to do something like this... http://jsfiddle.net/9GJez/ The way this code works is by setting two variables (or more) to track if an element has been clicked. We change these variables when that item has been clicked. For each event listener at the end of changing the boolean values of the click state, we run the function checkClick which will make sure all buttons were clicked. If they were clicked, we then run our code. This code could be cleaned up and made to be more portable and expandable, but this should hopefully get you started.

<input type="button" id="button1">
<input type="button" id="button2">
<div id="result" style="width:15px;height:15px;background-color:black;"></div>

<script>
var result = document.getElementById('result');
var button1 = document.getElementById('button1');
var button2 = document.getElementById('button2');

var button1Clicked = false;
var button2Clicked = false;

button1.addEventListener('click',function(e) {
    button1Clicked = true;
    checkClick();
},false);
button2.addEventListener('click',function(e) {
    button2Clicked = true;
    checkClick();
},false);

function checkClick() {
   if(button1Clicked && button2Clicked) {
      result.style.backgroundColor = 'red';
   }
}
</script>

Answer 2

Two ways you can do this, one would be to have a data attribute within the html button that identifies whether the click has been done.

<button id="btn">Click Me!</button>

<script>
var clickedAlready = false;

document.getElementById('btn').onclick = function() {
  if (clickedAlready) {
//do something...
}
else
  clickedAlready = true; 
}
</script>

While global variables aren't the best way to handle it, this gives you an idea. Another option would be to store the value in a hidden input, and modify that value to identify if it's the first click or not.

Answer 3

Maybe something like this?

var numberTimesClicked = 0;
function clickHandler() {
    if (numberTimesClicked > 0) {
        // do something...
    }
    numberTimesClicked++;
}

document.getElementById("myBtn").addEventListener("click", clickHandler);