Wie verbindet man Array-Elemente mit innerHTML? z.B. element [0] .innerHTML

Question

Ich habe ein Problem mit "wenn" in "check" -Funktion, es funktioniert überhaupt nicht. Ich weiß nicht, was ich falsch mache. Wenn wie so fest einprogrammiert:

if(a.innerHTML == nazwa && b.innerHTML == nazwa && c.innerHTML == nazwa){ 
call(a1, a2, a3, nazwa) 
} 

(a1 = "a", a2 = "b", a3 = "c") 

alles funktioniert gut, aber wenn Daten aus dem Array ist nichts passiert. Vielleicht ist es etwas mit Array [0] .innerHTML? Bitte helfen! : D

$(function(){ 
 

 
    var x = "o", 
 
     flag; 
 

 
    var a = document.getElementById("a"), 
 
     b = document.getElementById("b"), 
 
     c = document.getElementById("c"), 
 
     d = document.getElementById("d"), 
 
     e = document.getElementById("e"), 
 
     f = document.getElementById("f"), 
 
     g = document.getElementById("g"), 
 
     h = document.getElementById("h"), 
 
     i = document.getElementById("i"); 
 

 
    var testy = ["abc", "def", "ghi", "adg", "beh", "cfi", "aei", "gec"]; 
 
    
 
    var styleWin = {"background-color": "yellow", 
 
        "color" : "red" }; 
 
    
 

 

 
    // abc 
 
    // def 
 
    // ghi 
 
    // abc, def, ghi, adg, beh, cfi, aei, gec 
 
    //check if we have 3 in row, if yes, alert winner 
 
    function check(nazwa){ 
 
    // When hardcoded like so, works perfect!! 
 
    // if(a.innerHTML == nazwa && b.innerHTML == nazwa && c.innerHTML == nazwa){ 
 
    // call(a1, a2, a3, nazwa) 
 
    // } 
 
    
 
    for(var ij = 0; ij < testy.length; ij++){ 
 
     testy[ij].split(""); 
 
     console.log("cons 0 = " + testy[ij][0] + " cons 1 = " + testy[ij][1] + " cons 2 = " + testy[ij][2]); 
 
     if(testy[ij][0].innerHTML == nazwa && testy[ij][1].innerHTML == nazwa && testy[ij][2].innerHTML == nazwa){ 
 
     call(testy[ij][0], testy[ij][1], testy[ij][2], nazwa); 
 
     console.log("NAZWA " + nazwa); 
 
     } 
 
    } 
 
    }; 
 
    
 
    function call(f1, f2, f3, n1){ 
 
     console.log("Wygrał! " + n1); 
 
     // console.log(testy[0]); 
 
     flag = "end"; 
 
     $("#"+f1+",#"+f2+", #"+f3).css(styleWin); 
 
     
 
    } 
 
    
 
    //check if game has ended or player clicks at used field, else put sign in field 
 
    $("div.item").on("click", function(){ 
 
    var place = this.innerText; 
 
    if(place == "x" || place == "o"){ 
 
     console.log("Niedozwolony ruch!"); 
 
    } else if(flag !== "end"){ 
 
     this.innerText = x; 
 
     check(x); 
 
    } 
 
    }); 
 
    
 
    //Change between x and o 
 
    $(".container").on("click", function() { 
 
    if(flag !== "end"){ 
 
     (x == "o") ? x = "x" : x = "o"; 
 
     return x; 
 
    } 
 
    }); 
 
    
 
    //reset 
 
    $(".reset").on("click", function(){ 
 
    $(".item").removeAttr('style'); 
 
    $(".item").empty(); 
 
    flag = ""; 
 
    }); 
 
});

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.over { 
 
    display: grid; 
 
    border: 5px solid red; 
 
    grid-template-columns: auto 300px auto; 
 
    grid-template-rows: auto 300px auto; 
 
    grid-template-areas: ". f1 ." ". x ." ". f2 ."; 
 
} 
 

 
.container { 
 
    display: grid; 
 
    grid-template-columns: 100px 100px 100px; 
 
    grid-template-rows: 100px 100px 100px; 
 
    grid-template-areas: "a b c" "d e f" "g h i"; 
 
    grid-area: x; 
 
    grid-gap: 0; 
 
    justify-items: stretch; 
 
    align-items: stretch; 
 
    border: 1px solid red; 
 
} 
 

 
.item-a { 
 
    grid-area: a; 
 
} 
 

 
.item-b { 
 
    grid-area: b; 
 
} 
 

 
.item-c { 
 
    grid-area: c; 
 
} 
 

 
.item-d { 
 
    grid-area: d; 
 
} 
 

 
.item-d { 
 
    grid-area: d; 
 
} 
 

 
.item-e { 
 
    grid-area: e; 
 
} 
 

 
.item-f { 
 
    grid-area: f; 
 
} 
 

 
.item-g { 
 
    grid-area: g; 
 
} 
 

 
.item-h { 
 
    grid-area: h; 
 
} 
 

 
.item-i { 
 
    grid-area: i; 
 
} 
 

 
.fix { 
 
    grid-area: f1; 
 
    height: 100px; 
 
} 
 

 
.fix2 { 
 
    grid-area: f2; 
 
    height: 100px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.item { 
 
    border: 1px solid black; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.item:hover { 
 
    background-color: red; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="over"> 
 
    <div class="fix"></div> 
 
    <div class="container"> 
 
    <div class="item-a item" id="a"></div> 
 
    <div class="item-b item" id="b"></div> 
 
    <div class="item-c item" id="c"></div> 
 
    <div class="item-d item" id="d"></div> 
 
    <div class="item-e item" id="e"></div> 
 
    <div class="item-f item" id="f"></div> 
 
    <div class="item-g item" id="g"></div> 
 
    <div class="item-h item" id="h"></div> 
 
    <div class="item-i item" id="i"></div> 
 
    </div> 
 
    <div class="fix2"><button class="reset">Reset</button></div> 
 
</div>

Answer 1

Der Code schlägt fehl, da Ihre testy Variable ein Array von Strings, nicht ein Array von Objekten ist. Wenn Sie es mit etwas wie testy[ij][0] dereferenzieren, erhalten Sie die Zeichenfolge "a", nicht das Objekt, das in der Variablen a enthalten ist. Um dies zu beheben, ändern Sie Ihre testy Erklärung wie folgt:

var testy = [[a,b,c], [d,e,f], [g,h,i], [a,d,g], [b,e,h], [c,f,i], [a,e,i], [g,e,c]];

Sie können auch den Aufruf von testy[ij].split(""); entfernen. Diese Funktion gibt ein Array zurück und lässt die Zeichenfolge testy[ij] unverändert. Sie verwenden das zurückgegebene Array nicht, und daher hat der Aufruf an split keinen Effekt.