Show DIV only after Click on 3 Buttons - html

Question

I want to make a DIV which appear only when someone click on 3 buttons.
I searched through the posts and find something like, Hide/Show DIV onClick Button but i can't find anything like show DIV only after Click on all 3 buttons.I tried to modify a few but had no luck.
Anyone point me in the direction for example? Would like to do this in JS or jQuery.
Any help would be much appreciated.Thanks in Advance

Answer 1

I would do it by making an if-statement that passes if a variable counter you create reaches 3. Every click to one of 3 buttons adds to the counter once, and at 3 it passes the if-statement and the div appears.
For example, you should understand this code:
var counter = 0;
if(counter == 3) {
console.log("Show div!");
}
So your job is to figure out how to do this with your current situation, and instead of just console.log something random, to show the div you wish to show when the counter reaches 3.
It's the same if your buttons are 3 separate ones, just add to the counter upon each click.
So in your callback function inside JQuery's .click() function you can add to the counter every time someone clicks one of three buttons, and some where else in your js file you can make an if-statement checking if that variable has reached "3". If it has, make the div appear.
I suggest you work on this problem in this way before making improvements, such as considering how to improve this code so that it only works upon clicking each of the three unique buttons once. Breaking down problems is very important in programming.
One tip I have for when you reach this point is say you have 3 buttons with unique ids: 'btn-1', 'btn-2', 'btn-3', think of a way of making the if statement only fire off if each of those unique buttons are clicked.
See if you can get this to work yourself, and feel free check back with some sample code for more help.

Answer 2

You need to have one variable that acts as counter. And you need to make every of those buttons clickable only once.
<button class="clickableOnce">Btn 1</button>
<button class="clickableOnce">Btn 1</button>
<button class="clickableOnce">Btn 1</button>
<div class="theDiv" id="theDiv">
Javscript code:
var countMyClicks = 0;
jQuery('.clickableOnce').on('click', function() {
countMyClicks++;
jQuery(this).prop('disabled', true);
if(countMyClicks==3){
jQuery('#theDiv').show();
}
});
CSS code:
.theDiv{
background:red; height:10px; width:10px; display:none;
}
And you can check the fiddle here:
https://jsfiddle.net/c2uc44f1/

Answer 3

Make 3 buttons, put the same class in the 3 of them, like this:
<button class="ex">Button1</button>
<button class="ex">Button2</button>
<button class="ex">Button3</button>
Then use JS:
var a = 0;
$(".ex").click(function({
a++;
});