Javascript:使用按钮保存 .innerHTML 数据

Javascript: Saving .innerHTML Data with a Button

本文关键字：保存 innerHTML 数据 按钮 Javascript      更新时间：2023-09-26

我是Javascript的新手，我正在尝试学习创建一个简单的井字游戏程序。在这个阶段，我不关心重构，而是让基本元素工作。代码如下：

 window.onload = function() {
  // Establish the boxes for the selector
  var boxOne = document.querySelector("#b1");
  // Create an event when a box is clicked
  boxOne.onclick = function() {
    if (boxOne.innerHTML === "X") {
        boxOne.innerHTML = "O";
    } else {
        boxOne.innerHTML = "X";
    }
  }
  // Check the current innerHTML of the grid for a win.
  var b1 = boxOne.innerHTML,
      b2 = boxTwo.innerHTML,
      b3 = boxThree.innerHTML,
      b4 = boxFour.innerHTML,
      b5 = boxFive.innerHTML,
      b6 = boxSix.innerHTML,
      b7 = boxSeven.innerHTML,
      b8 = boxEight.innerHTML,
      b9 = boxNine.innerHTML;
  var board = [
    [b1, b2, b3],
    [b4, b5, b6],
    [b7, b8, b9]
    ];
  endButton.onclick = function() {
    console.log(board);
  }
  var clearButton = document.getElementById('clear');
  var allBoxes = document.querySelector(".box");
  clearButton.onclick = function() {
    allBoxes.innerHTML = "";
  }
}

玩家应该能够单击一个框来选择 X 或 O。然后，我希望他们单击"结束回合"，以便游戏可以检查棋盘的当前状态，并在必要时报告获胜情况。

但是，它似乎没有保存玩家输入。当我调用".innerHTML"时，它只返回一个空白数组。然而，如果我查看浏览器控制台，我会看到".innerHTML"元素中有 X 或 O。所以数据在那里，但它没有被输入到数组中。我试图在它的不同实现上对此进行测试，但数组仍然是空白的。

"清除"按钮也不起作用。到目前为止，我在谷歌上所做的一切都使用我在这里的内容作为示例来清除元素中的 HTML 输入。

谁能帮助我了解我的代码出了什么问题？谢谢。

附加信息：您可以在Github上查看我当前的所有工作文件，其中包括HTML，CSS和JS文档。

代码的问题在于逻辑;你有几个变量（框一。方框九，b1..B9，板）。您可以实例化这些变量，但只更改 boxOne。框点击事件中的九个变量。此外，在实例化开发板后，您永远不会更新它（这就是为什么当您单击"结束转弯"按钮时它总是空白的原因）。

您的 endButton.onclick 函数应该更改为此函数以使其工作;

endButton.onclick = function() {
  // Check the current innerHTML of the grid for a win.
  var b1 = boxOne.innerHTML,
  b2 = boxTwo.innerHTML,
  b3 = boxThree.innerHTML,
  b4 = boxFour.innerHTML,
  b5 = boxFive.innerHTML,
  b6 = boxSix.innerHTML,
  b7 = boxSeven.innerHTML,
  b8 = boxEight.innerHTML,
  b9 = boxNine.innerHTML;
  var board = [
   [b1, b2, b3],
   [b4, b5, b6],
   [b7, b8, b9]
  ];
  console.log(board);
}

但是，您的 JavaScript 需要一些清理，以避免重复自己;

window.onload = function() {
// Instantiate board
var board = document.getElementsByClassName('box');
for (var i = 0; i < board.length; i++) {
    board[i].onclick = function() {
        this.innerHTML = (this.innerHTML === 'X')? 'O' : 'X';
    }
}
// A function to render the board
var renderBoard = function() {
    for (var i = 0; i < board.length; i++) {
        this.innerHTML = 'X';
    }
}
// End turn
var endButton = document.getElementById('endturn');
endButton.onclick = function() {
    // Do magic
}
// Clear board
var clearButton = document.getElementById('clear');
clear.onclick = function() {
  for (var i = 0; i < board.length; i++) {
        board[i].innerHTML = '';
    }
}
renderBoard();
}
我想

你误解了innerHTML是什么。当您执行b1 = boxOne.innerHTML时，您将当前html的字符串存储在b1中。您没有存储对 innerHTML 属性的引用。因此，当您执行boxOne.innerHTML = 'X'时，您更改了对象的内部html，但b1仍然保留了内部HTML最初的内容。

一个例子来澄清我的陈述：

window.onload = function() {
  // Establish the boxes for the selector
  var boxOne = document.querySelector("#b1");
  // initialInnerHTML won't change when you change boxOne.innerHTML
  var initialInnerHTML = boxOne.innerHTML;
  boxOne.innerHTML = '<a>New link</a>'; // Change the dom content
  var newInnerHTML = boxOne.innerHTML;
  alert(initialInnerHTML); // Alerts a blank dialog
  alert(newInnerHTML); // Alerts "<a>New link</a>"

  // An example of storing a reference to an object
  var shoppingCart = {
          apples: { price: 6, quantity: 7 },
          oranges: { price: 10, quantity: 8 }
      };
  var appleReference = shoppingCart.apples;
  alert(appleReference.quantity); // Alerts 7
  shoppingCart.apples.quantity = 9;
  alert(appleReference.quantity); // Alerts 9
}

要解决您的问题，您需要在每次按下按钮时获取 dom 元素的 innerHTML 属性，而不是仅在加载页面时才执行此操作。

您的第二个问题是document.querySelector('.box')只返回与选择器匹配的第一个 dom 元素。您应该使用 document.querySelectorAll('.box') 它返回元素数组。然后，遍历数组并在每个数组上设置 innerHTML。

清除按钮：

  var clearButton = document.getElementById('clear');
  var allBoxes = document.querySelectorAll(".box");
  clearButton.onclick = function() {
    for(var i = 0; i < allBoxes.length; i++){
        allBoxes[i].innerHTML = "";
    }
  }
相关文章：