複数のボタンをクリックするとdivタグが表示されます

Question

ボタンをクリックすると、すべてがクリックされるとdivタグ要素が表示されます。私はここでいくつかのスレッドを試しましたが、成功しておらず、コードを動作させることはできませんでした。どんな援助も感謝して受け入れられるだろう。これがフラッシュだったら私はそれをうまくやっただろう。

<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 1

あなたは、変数の要素ごとのクリック数を保存する必要が#learningnewskills

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>

Answer 2

はこれを試してみてください：

var sum = 0; 
for (var i = 0; i < 5; i++) { 
    $("#" + i + "b").click(function() { 
    if ($("#" + this.id).attr('class') != "noclick") { 
     sum++; 
     $("#" + this.id).attr('class', 'noclick'); 
    } 
    if (sum == 5) { 
     $("#hid").show(); 
    } 
    }); 
} 

https://jsfiddle.net/qnb058k5/

これはあなたのために働く

$('.w3-button').on('click', function() { 
    $(this).addClass('clicked'); 

    // Check to see if all the .w3-button elements are 'clicked' 
    if ($('.w3-button:not(".clicked")').length == 0) { 
     $('.hidden-until-all-clicked').show(); 
    } 
}); 

希望：

Answer 3

は、ここではjQueryを使って一つのアプローチです。

乾杯