Arrays und Iteration JS und HTML

Also als eine Lernübung der Kombination von CSS, JS und HTML in eine interaktive Übung, habe ich beschlossen, das 2048 Spiel in einem Webbrowser mit JS HTML und CSS neu zu erstellen. Ich habe im Grunde 16 "Box" -Elemente in einem quadratischen Spielbrett codiert.Arrays und Iteration JS und HTML

Mein Problem bezog sich hauptsächlich auf die Weitergabe von Javascript-Arrays über Funktionen. Wenn ich mein "boxes" -Array in cycleBoxes() erstelle, ist die Länge 16, wie es sein sollte. Wenn ich jedoch leere div-Elemente in "emptyBoxes" drücke, bleibt die Länge 1 und wird wiederum an meine momentan unvollständige Funktion generateNumber() zurückgegeben. Dies liegt wahrscheinlich daran, dass meine for-Schleife nur einmal iteriert. Allerdings verstehe ich nicht, warum dies so ist, da es 16-mal technisch iterieren sollte (console.log (boxes.length) gibt 16) nein?

Hier ist ein Beispiel dafür, wie Klassen gebaut werden div Container mit:

<div id = "game_background"> 

      <!-- Row 1 --> 

      <div id = "row_1" class = "row"> 

       <div id = "1_1" class = "box"> 
        <p class = "v"></p> 
       </div> 

       <div id = "1_2" class = "box"> 
        <p class = "v"></p> 
       </div> 

       <div id = "1_3" class = "box"> 
        <p class = "v"></p> 
       </div> 

       <div id = "1_4" class = "box"> 
        <p class = "v"></p> 
       </div> 

      </div> 

      <!-- Row 2 --> 
      <div id = "row_2" class = "row"> 

       <div id = "2_1" class = "box"> 
        <p class = "v"></p> 
       </div> 

       <div id = "2_2" class = "box"> 
        <p class = "v"></p> 
       </div> 

       <div id = "2_3" class = "box"> 
        <p class = "v"></p> 
       </div> 

       <div id = "2_4" class = "box"> 
        <p class = "v"></p> 
       </div> 
      </div>

Und hier ist mein JS

function generateNumber(){ 
    var emptyBoxes = []; 
    emptyBoxes = cycleBoxes(); 
    console.log(emptyBoxes.length); 
    //var random = Math.floor((Math.random()* (emptyBoxes.length+1))); 
} 


function cycleBoxes(){ 
    var boxes = document.getElementsByClassName("v"); 
    console.log(boxes); 

    var emptyBoxes = []; 
    for(i = 0; i < boxes.length; i++){ 
     if(boxes[i].innerHTML == ""){ 
      emptyBoxes.push(boxes[i]); 
     } 

    return emptyBoxes; 
}

Quelle

2017-01-05 alexp2603

Es sieht aus wie Sie 'emptyBoxes' in der ersten Iteration der' for' Schleife – AranS

Wo ist die schließende Klammer für die 'for' Schleife zurückkehren? Vermutung, dass Sie eine Klammer irgendwo mit inkonsistenter Einrückung haben, die den Code erlaubt, mit der Rückkehr in der Schleife zu laufen. –

Randnotiz: 'document.querySelectorAll (". V: empty ")' macht Dinge sauberer für Sie. Moderne Maschinen würden Sie tun lassen: 'return [... document.querySelectorAll (". V: empty ")]' –

Sie die schließende Klammer der for-Schleife vergessen:

for(i = 0; i < boxes.length; i++){ 
    if(boxes[i].innerHTML == ""){ 
     emptyBoxes.push(boxes[i]); 
    } 
}

Working jsFiddle

Quelle

2017-01-05 14:38:06

Der folgende Code ist die richtige Antwort:

function cycleBoxes(){ 
    var boxes = document.getElementsByClassName("v"); 
    console.log(boxes); 

    var emptyBoxes = []; 
    for(i = 0; i < boxes.length; i++){ 
     if(boxes[i].innerHTML == ""){ 
      emptyBoxes.push(boxes[i]); 
     } 
    } // you forget this, without this, emptyBoxes will return with length 1 
    return emptyBoxes; 
}

Quelle

2017-01-05 14:41:34 vanzand

Arrays und Iteration JS und HTML

Antwort

Verwandte Themen