John Cooper John Cooper - 7 days ago 4
jQuery Question

clicking multiple buttons reveals div tag

I'd like to be able to click a series of buttons, and once all are clicked reveal a div tag element. I've tried a couple of other threads on here, but not been successful and getting the code to work. any help would be gratefully accepted. If this was flash I'd have done it fine. #learningnewskills

<button class="w3-button" onclick="plusDivs">one of five</button>
<button class="w3-button" onclick="plusDivs">two of five</button>
<button class="w3-button" onclick="plusDivs">three of five</button>
<button class="w3-button" onclick="plusDivs">four of five</button>
<button class="w3-button" onclick="plusDivs">five of five</button>

The following div tag is hidden by default and revealed when all five buttons are clicked...

<div class="hidden-until-all-clicked">You clicked all five buttons</div>

Answer

You have to save in a variable the number of clicks per element

var button = document.getElementsByClassName("w3-button"),
    hidden = document.getElementsByClassName("hidden-until-all-clicked")[0],
    len = button.length,
    count = 0,
    i;
function click(){
  count += 1;
  if(count == len){
    hidden.style.display="block";
  }
  this.removeEventListener("click", click);
}
for(i=0;i<len;i+=1){
  button[i].addEventListener("click", click);
}
.hidden-until-all-clicked{
  display: none;
}
<button class="w3-button">one of five</button>
<button class="w3-button">two of five</button>
<button class="w3-button">three of five</button>
<button class="w3-button">four of five</button>
<button class="w3-button">five of five</button>

<p>The following div tag is hidden by default and revealed when all five buttons are clicked...</p>

<div class="hidden-until-all-clicked">You clicked all five buttons</div>