if/else文をループする方法は？

Question

私はJavascriptを使い慣れていないので、ここで正しい質問をしているかどうかはわかりません。しかし、私は6つの要素を持っています - ユーザーがクリックして消える木は6つです。それらのすべてが消えた後、私は何か他のものが欲しいです。しかし、ユーザーがどのような順序でクリックするのか分からないので（私は実際にはJSについてはあまり学んでいない）、if/elseステートメントではツリーが残っていないかどうかを尋ねて、新しい関数。

残念ながら私はそれがうまくいかないと思っています。間違った方法で書いているのか間違ったところに置いているのか分かりませんが、すでに間違った結果が出ているようですユーザーはまだ何もクリックしていないので、最初は。だから私はそれをループで実行させ、いくつの木が何枚残っているかを確認するにはどうすればよいですか？

申し訳ありませんがコードは少し長いですが、私はそれを最適化する方法をまだ分かりません。

var TreesLeft = 6; 
function TreeGoneOnClick(){ 
console.log("TreeGoneOnClick"); 
    BigTrees.classList.add("flash"); 
//click each tree 
    tree1.addEventListener("click", tree1Clicked); 
    tree2.addEventListener("click", tree2Clicked); 
    tree3.addEventListener("click", tree3Clicked); 
    tree4.addEventListener("click", tree4Clicked); 
    tree5.addEventListener("click", tree5Clicked); 
    tree6.addEventListener("click", tree6Clicked); 

ifelse(); 
} 

function tree1Clicked(){ 
    console.log("tree1 clicked"); 
    TreesLeft-=1; 
    tree1.classList.remove("tree1S"); 
} 

function tree2Clicked(){ 
    console.log("tree2 clicked"); 
    TreesLeft-=1; 
    tree2.classList.remove("tree2S"); 
} 

function tree3Clicked(){ 
    console.log("tree3 clicked"); 
    TreesLeft-=1; 
    tree3.classList.remove("tree3S"); 
} 

function tree4Clicked(){ 
    console.log("tree4 clicked"); 
    TreesLeft=TreesLeft-1; 
    tree4.classList.remove("tree4S"); 
} 

function tree5Clicked(){ 
    console.log("tree5 clicked"); 
    TreesLeft-=1; 
    tree5.classList.remove("tree5S"); 
} 

function tree6Clicked(){ 
    console.log("tree6 clicked"); 
    TreesLeft-=1; 
    tree6.classList.remove("tree6S"); 
} 



function ifelse(){ 
    if (TreesLeft ==0){ 
    console.log("it worked"); 
    allTreesGone(); 
    } 
    else { 
    console.log("did not work"); 
    } 
    } 


function allTreesGone(){ 
    console.log("All trees are gone"); 
} 

Answer 1

あなたTreeGoneOnClick関数の最後ではなく、すべてのtreeXClicked関数の最後にあなたのifelse()関数を呼び出すことができます。

Answer 2

コールバックを統合して条件をすべて1つのコードブロックでチェックすると、処理が簡単になります。

//set the callback value of num and the this reference 
//so when this tree is clicked num will equal 1 
tree1.addEventListener("click", treeClicked.bind(this, 1)); 

Answer 3

コールイベントリスナーフロンifElse機能：あなたが本当にクリックのツリーのインデックスを知る必要がある場合

function treeClicked(num, evt) { 
    //evt.target contains a reference to the tree clicked 
    //so you don't really need num, but just in case 
    console.log("tree" + num + " clicked"); 
    treesLeft -= 1; 
    if (treesLeft <= 0) 
     callSomeOtherFunction(); 
} 

、バインドとそれを達成することができます（つまり、evtは十分ではありません） TreesGoneOnClick関数で一度呼び出すように設定されています。

これは、イベントリスナーを登録する場所であるため、このメソッドは一度呼び出され、クリックが行われる前であると仮定します。 1回のクリックのたびに残っている木の数をテストする必要があります。したがって、リスナーでは