「チェック」機能の中に「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>
私は私の答えがあります。もしそうなら: 'if(($ test" [ij] [0])。text())== nazwa &&($( "#" + testy [ij] [1]) .text())== nazwa &&($( "#" + testy [ij] [2])。text())== nazwa){' –