Question

我有一个名为bot()的函数，当我在带有addEventListener()的js上调用它时，它会执行一次，然后再也不会再执行它我希望每次单击时它都会执行TD。

每次 "X" "O" 获胜时，它都会执行函数doWin()，这可以正常工作，但每当他尝试清除所有td's让我再次播放此错误消息显示在控制台上：

Uncaught TypeError: Cannot set property 'textContent' of null
at doWin (ttt.html:94)

为什么他不更改textcontent的{{1}}？

下面会有我的代码片段

td

var moves = 0;
var randomOneTwo = doGetRandom(1, 2)
var randomPlayBot = 0;
var turn = randomOneTwo == 1 ? "X" : "O"
var score1 = 0;
var score2 = 0;
var win = 0;
var canPlay = false;

window.addEventListener("load", _loaded);

function _loaded() {
  document.getElementById("plpl").textContent = "The Player  " + turn + " is playing."
  var ids = ['b1', 'b2', 'b3', 'b4', 'b5', 'b6', 'b7', 'b8', 'b9'];
  var vale = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

  for (var i = 0; i < ids.length; i++) {
    document.getElementById(ids[i]).addEventListener("click", doSet);

  }

  addEventListener("click", doWin);
  addEventListener("click", bot);

  function doSet() {
    if (this.innerHTML !== "&nbsp;") {
      return;
    }
    this.innerHTML = turn;
    moves++
    canPlay = true;

    if (moves == 9) {
      alert("It's a draw!")
      doNewGame();
    } else {
      turn == "X" ? turn = "O" : turn = "X"
      document.getElementById("plpl").textContent = "The Player  " + turn + " is playing."
      turn == "X" ? vale[nc] = 100 : vale[nc] = -100;

    }
  }

  function bot() {
    if (canPlay == true) {
      do{
                    randomPlayBot = doGetRandom(9, 1)
                }
                while(document.getElementById(ids[randomPlayBot]).innerHTML !== "&nbsp;")
      document.getElementById(ids[randomPlayBot]).innerHTML = turn;
      moves++


      if (moves == 9) {
        alert("It's a draw!")
        doNewGame();
      } else {
        turn == "X" ? turn = "O" : turn = "X"
        document.getElementById("plpl").textContent = "The Player  " + turn + " is playing."
        turn == "X" ? vale[nc] = 100 : vale[nc] = -100;

      }
      canPlay = false
    }
  }

  function doWin() {
    let sum1 = vale[1] + vale[2] + vale[3];
    let sum2 = vale[4] + vale[5] + vale[6];
    let sum3 = vale[7] + vale[8] + vale[9];
    let sum4 = vale[1] + vale[4] + vale[7];
    let sum5 = vale[2] + vale[5] + vale[8];
    let sum6 = vale[3] + vale[6] + vale[9];
    let sum7 = vale[1] + vale[5] + vale[9];
    let sum8 = vale[3] + vale[5] + vale[7];
    for (i = 0; i <= 8; i++) {
      if ((sum1 == 300 || sum2 == 300 || sum3 == 300 || sum4 == 300 || sum5 == 300 || sum6 == 300 || sum7 == 300 || sum8 == 300)) {
        turn == "X" ? score1++ : score2++
          document.getElementById("sc1").innerHTML = "O: " + score1;
        for (j = 0; j < ids.length; j++) {
          document.getElementById(ids[j]).textContent = "&nbsp;"
        }
      } else if ((sum1 == -300 || sum2 == -300 || sum3 == -300 || sum4 == -300 || sum5 == -300 || sum6 == -300 || sum7 == -300 || sum8 == -300)) {
        turn == "X" ? score2++ : score1++
          document.getElementById("sc2").innerHTML = "X: " + score2;
        for (j = 0; j < ids.length; j++) {
          document.getElementById(ids[j]).textContent = "&nbsp;"
        }
      } else {
        return;
      }
    }
  }

}




function doGetRandom(min, max) {
  let h = Math.random() * (max - min) + min;
  return Math.round(h);
}

function doGetNum(n) {
  nc = n;
}

td.td-ttt {
  padding: 30px;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}

td.td2-ttt {
  padding: 30px;
  border-right: 1px solid black;
}

td.td3-ttt {
  padding: 30px;
  border-bottom: 1px solid black;
}

td.td4-ttt {
  padding: 30px;
}

编辑1

所有这一切都是正确的，但当我在显示此错误时切换if返回时：

<h1 class="hd-1" id="plpl"></h1>
<table>
  <tr>
    <td id="sc1">O: 0</td>
    <td id="sc2">X: 0</td>
  </tr>
</table>
<table id="tb-ttt">
  <tr>
    <td class="td-ttt" id="b1" onclick="doGetNum('1')">&nbsp;</td>
    <td class="td-ttt" id="b2" onclick="doGetNum('2')">&nbsp;</td>
    <td class="td3-ttt" id="b3" onclick="doGetNum('3')">&nbsp;</td>
  </tr>
  <tr>
    <td class="td-ttt" id="b4" onclick="doGetNum('4')">&nbsp;</td>
    <td class="td-ttt" id="b5" onclick="doGetNum('5')">&nbsp;</td>
    <td class="td3-ttt" id="b6" onclick="doGetNum('6')">&nbsp;</td>
  </tr>
  <tr>
    <td class="td2-ttt" id="b7" onclick="doGetNum('7')">&nbsp;</td>
    <td class="td2-ttt" id="b8" onclick="doGetNum('8')">&nbsp;</td>
    <td class="td4-ttt" id="b9" onclick="doGetNum('9')">&nbsp;</td>
  </tr>
</table>

Answer 1

您最新的错误是获取1到9之间但9超出范围的数组的随机索引的结果。你想要：

randomPlayBot = doGetRandom(0, 8);

现在您有一个新问题需要解决。在doWin方法之后调用doSetNum方法，因此所有评分都搞砸了......

var moves = 0;
var randomOneTwo = doGetRandom(1, 2)
var randomPlayBot = 0;
var turn = randomOneTwo == 1 ? "X" : "O"
var score1 = 0;
var score2 = 0;
var win = 0;
var canPlay = false;

window.addEventListener("load", _loaded);

function _loaded() {
  document.getElementById("plpl").textContent = "The Player  " + turn + " is playing."
  var ids = ['b1', 'b2', 'b3', 'b4', 'b5', 'b6', 'b7', 'b8', 'b9'];
  var vale = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

  for (var i = 0; i < ids.length; i++) {
    document.getElementById(ids[i]).addEventListener("click", doSet);

  }

  addEventListener("click", doWin);
  addEventListener("click", bot);

  function doSet() {
    if (this.innerHTML !== "&nbsp;") {
      return;
    }
    this.innerHTML = turn;
    moves++
    canPlay = true;

    if (moves == 9) {
      alert("It's a draw!")
      doNewGame();
    } else {
      turn == "X" ? turn = "O" : turn = "X"
      document.getElementById("plpl").textContent = "The Player  " + turn + " is playing."
      turn == "X" ? vale[nc] = 100 : vale[nc] = -100;

    }
  }

  function bot() {
    if (canPlay == true) {
      do {
        randomPlayBot = doGetRandom(0, 8)
      }
      while (document.getElementById(ids[randomPlayBot]).innerHTML !== "&nbsp;")
      document.getElementById(ids[randomPlayBot]).innerHTML = turn;
      moves++


      if (moves == 9) {
        alert("It's a draw!")
        doNewGame();
      } else {
        turn == "X" ? turn = "O" : turn = "X"
        document.getElementById("plpl").textContent = "The Player  " + turn + " is playing."
        turn == "X" ? vale[nc] = 100 : vale[nc] = -100;

      }
      canPlay = false
    }
  }

  function doWin() {
    console.log(vale);
    let sum1 = vale[1] + vale[2] + vale[3];
    let sum2 = vale[4] + vale[5] + vale[6];
    let sum3 = vale[7] + vale[8] + vale[9];
    let sum4 = vale[1] + vale[4] + vale[7];
    let sum5 = vale[2] + vale[5] + vale[8];
    let sum6 = vale[3] + vale[6] + vale[9];
    let sum7 = vale[1] + vale[5] + vale[9];
    let sum8 = vale[3] + vale[5] + vale[7];
    for (i = 0; i <= 8; i++) {
      if ((sum1 == 300 || sum2 == 300 || sum3 == 300 || sum4 == 300 || sum5 == 300 || sum6 == 300 || sum7 == 300 || sum8 == 300)) {
        turn == "X" ? score1++ : score2++
          document.getElementById("sc1").innerHTML = "O: " + score1;
        for (j = 0; j < ids.length; j++) {
          document.getElementById(ids[j]).textContent = "&nbsp;"
        }
      } else if ((sum1 == -300 || sum2 == -300 || sum3 == -300 || sum4 == -300 || sum5 == -300 || sum6 == -300 || sum7 == -300 || sum8 == -300)) {
        turn == "X" ? score2++ : score1++
          document.getElementById("sc2").innerHTML = "X: " + score2;
        for (j = 0; j < ids.length; j++) {
          document.getElementById(ids[j]).textContent = "&nbsp;"
        }
      } else {
        return;
      }
    }
  }

}




function doGetRandom(min, max) {
  let h = Math.random() * (max - min) + min;
  return Math.round(h);
}

function doGetNum(n) {
  nc = n;
}

td.td-ttt {
  padding: 30px;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}

td.td2-ttt {
  padding: 30px;
  border-right: 1px solid black;
}

td.td3-ttt {
  padding: 30px;
  border-bottom: 1px solid black;
}

td.td4-ttt {
  padding: 30px;
}

<h1 class="hd-1" id="plpl"></h1>
<table>
  <tr>
    <td id="sc1">O: 0</td>
    <td id="sc2">X: 0</td>
  </tr>
</table>
<table id="tb-ttt">
  <tr>
    <td class="td-ttt" id="b1" onclick="doGetNum('1')">&nbsp;</td>
    <td class="td-ttt" id="b2" onclick="doGetNum('2')">&nbsp;</td>
    <td class="td3-ttt" id="b3" onclick="doGetNum('3')">&nbsp;</td>
  </tr>
  <tr>
    <td class="td-ttt" id="b4" onclick="doGetNum('4')">&nbsp;</td>
    <td class="td-ttt" id="b5" onclick="doGetNum('5')">&nbsp;</td>
    <td class="td3-ttt" id="b6" onclick="doGetNum('6')">&nbsp;</td>
  </tr>
  <tr>
    <td class="td2-ttt" id="b7" onclick="doGetNum('7')">&nbsp;</td>
    <td class="td2-ttt" id="b8" onclick="doGetNum('8')">&nbsp;</td>
    <td class="td4-ttt" id="b9" onclick="doGetNum('9')">&nbsp;</td>
  </tr>
</table>

js函数未在onload中定义，无法读取textContent = null的属性

1 个答案: