if/else 문 루프를 만드는 방법은 무엇입니까?

저는 Javascript를 처음 사용하기 때문에 여기에 올바른 질문을하고 있는지 확실하지 않습니다. 하지만 사용자가 클릭하여 사라질 수있는 6 개의 요소 (6 개의 나무)가 있습니다. 그들 모두가 사라진 후에 나는 다른 일이 일어나길 원합니다. 하지만 사용자가 어떤 순서로 클릭할지 모르기 때문에 (그리고 아직 JS에 대해 많이 배웠다.) if/else 문은 트리가 0 개 밖에 남아 있지 않은지 묻고 새로운 함수를 호출한다. .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"); 
}

출처

2016-10-23 insangelous

당신은 모든 treeXClicked 함수의 말에 대신하여 TreeGoneOnClick 함수의 끝에서 당신의 ifelse() 함수를 호출 할 수 있습니다.

출처

2016-10-23 18:43:01

하나의 코드 블록에서 콜백을 통합하고 조건을 모두 확인하면 더 간단 해집니다.

//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));

출처

2016-10-23 18:56:04 akarve

전화 이벤트 리스너 프론 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 함수에서 호출하도록 설치되었습니다.

이 메서드는 이벤트 리스너를 등록하기 때문에 클릭 한 번하기 전에이 메서드를 호출한다고 가정합니다. 몇 번의 나무가 남았는지에 대한 테스트는 클릭 할 때마다 이루어져야하므로 청취자의 경우

출처

2016-10-23 19:00:14

if/else 문 루프를 만드는 방법은 무엇입니까?

답변

관련 문제