如何在单击单个元素时增加数组的大小

问题描述 投票：0回答：1

我决定摆脱教程地狱，通过自己制作一个 X an O'S（井字棋）游戏来挑战自己。如下所示。我已经成功地实现了单击时显示 X 和 O 的功能。但现在我需要启用 X 和 O 在每次单击时交替显示。我正在尝试创建一个数组，其长度在每次单击按钮时都会增加。如果数组长度为偶数，则显示 O；如果数组长度为奇数，则显示 X。但每次点击时数组的长度仅为 1。如何让数组的大小在每次点击时实际增加？

此外，由于某些奇怪的原因，每次奇怪的点击时都不会显示 X。可能是什么问题？

JavaScript代码：

for (let num = 1; num <= 9; num++) {
  const text = document.querySelector("#box" + num + " h1");
  const box = document.querySelector("#box" + num);
  // let boxCounted = document.getElementsByClassName("square");

  //current click
  const xclick = function setToX() {
    text.innerHTML = "X";
  };

  //next click
  const oclick = function setToO() {
    text.innerHTML = "O";
  };

  let trackCounter = [];
  let clickcount = 0;
  
  box.onclick = () => {
    trackCounter.push(clickcount);
    console.log(trackCounter);

    if (trackCounter.length % 2 == 0) {
      box.onclick = oclick; //not carried out/working
      console.log("Even");
    } else if (trackCounter.length % 2 == 1) {
      box.onclick = xclick; //not carried out/working
      console.log("odd");
    } else {
      console.log("error");
    }
  };
}

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TicTacToe</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <section id="xosection">
      <div id="xogrid">
        <div class="row">
          <div id="box1" class="square">
            <h1></h1>
          </div>
          <div id="box2" class="square">
            <h1></h1>
          </div>
          <div id="box3" class="square">
            <h1></h1>
          </div>
        </div>
        <div class="row">
          <div id="box4" class="square">
            <h1></h1>
          </div>
          <div id="box5" class="square">
            <h1></h1>
          </div>
          <div id="box6" class="square">
            <h1></h1>
          </div>
        </div>
        <div class="row">
          <div id="box7" class="square">
            <h1></h1>
          </div>
          <div id="box8" class="square">
            <h1></h1>
          </div>
          <div id="box9" class="square">
            <h1></h1>
          </div>
        </div>
      </div>
    </section>
    <script src="index2.js"></script>
  </body>
</html>

这里是 github 上代码之前的一些进展的链接： 文字

如前所述，我尝试使用数组，希望其长度会增加。但事实并非如此。

我可能采用了一些糟糕的编码实践——比如使用 for 循环来命名变量？如果有，请告诉我，并向我展示最佳实践。但也向我展示如何解决我的思维过程。提前非常感谢您

编辑：我删除了一个名为loopCount的变量。当我第一次问这个问题时它就在那里。

javascript html arrays tic-tac-toe
1个回答
0
投票

我尝试将 trackcounter 数组设置为全局或外部循环，以便您的循环将在每次 for 循环迭代中更新

var trackCounter = [];
for (let num = 1; num <= 9; num++) {
  const text = document.querySelector("#box" + num + " h1");
  const box = document.querySelector("#box" + num);
  // let boxCounted = document.getElementsByClassName("square");

  //current click
  const xclick = function setToX() {
    text.innerHTML = "X";
  };

  //next click
  const oclick = function setToO() {
    text.innerHTML = "O";
  };

  //let trackCounter = [];
  let clickcount = 0;
  
  box.onclick = () => {
    trackCounter.push(clickcount);
    console.log(trackCounter);

    if (trackCounter.length % 2 == 0) {
      box.onclick = oclick; //not carried out/working
      console.log("Even");
    } else if (trackCounter.length % 2 == 1) {
      box.onclick = xclick; //not carried out/working
      console.log("odd");
    } else {
      console.log("error");
      console.log(countResult);
    }
  };
}

尝试一下，希望它能解决您的问题

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.