2017-05-23 5 views
0

「チェック」機能の中に「if」の問題がありますが、全く機能しません。 私は何が間違っているのか分かりません。 そのようにハードコーディングする場合:配列要素をinnerHTMLに接続する方法は?例えば要素[0] .innerHTML

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

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

すべてがうまく動作しますが、データが配列nothingからである場合に発生します。 配列[0] .innerHTMLのものがありますか? 助けてください! :あなたのtesty変数は文字列の配列ではなく、オブジェクトの配列であるため、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>

+0

私は私の答えがあります。もしそうなら: 'if(($ test" [ij] [0])。text())== nazwa &&($( "#" + testy [ij] [1]) .text())== nazwa &&($( "#" + testy [ij] [2])。text())== nazwa){' –

答えて

0

コードは失敗します。 testy[ij][0]のようなもので逆参照すると、変数aに含まれるオブジェクトではなく、文字列"a"が得られます。この問題を解決するには、そのようなあなたのtesty宣言を変更:

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]];

またtesty[ij].split("");への呼び出しを削除することができます。この関数は配列を返し、文字列はtesty[ij]のまま変更されません。返された配列を使用していないため、splitの呼び出しは効果がありません。

関連する問題