Question

我在“检查”功能中遇到“如果”的问题，它根本不起作用。我不知道我做错了什么。当像这样硬编码时：

一切正常，但是当数据来自数组时没有任何反应。也许它是数组[0] .innerHTML的东西？请帮忙！：d

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

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

$(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;
}

Answer 1

代码失败，因为您的testy变量是一个字符串数组，而不是一个对象数组。当您使用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的调用无效。

如何使用innerHTML连接数组元素？例如元素[0] .innerHTML

1 个答案: