变量设置为 HTML object 随着对象的变化

Question

我正在用 Vanilla JS 制作一个简单的国际象棋游戏，并且正在尝试实现一个撤消移动功能，当您按下一个按钮时，您可以收回您的移动。目前有两个按钮，一个是撤销你的动作，另一个是提交你的动作并将游戏交给你的对手。大多数国际象棋游戏的简单功能。

现在的工作方式是在玩家移动之前为动态生成的 8 x 8 棋盘 HTML 对象分配一个变量（所以 let previousState = board 其中 board 是const board = document.getElementById("board"))。因此，在玩家接触游戏之前，board 的当前状态就被保存了。

这是 JS：

function drawBoard() {
    // Two loops one for even rows one for odd inside of another loop so all rows are drawn
    let isWhite = false
    let idSwitch = 0
    for (let p = 1; p <= 4; p++) {
        let oddRow = document.createElement("div")
        let evenRow = document.createElement("div")
        for (let i = 1; i <= 8; i++) {
            idSwitch++
            let square = document.createElement("div")
            square.classList.add("square")
            square.setAttribute("id", `square${idSwitch}`)
            if (isWhite) {
                isWhite = false
            } else {
                square.classList.add("black")
                isWhite = true
            }
            oddRow.appendChild(square)
        }
        board.appendChild(oddRow)

        for (let q = 1; q <= 8; q++) {
            idSwitch++
            let square = document.createElement("div")
            square.classList.add("square")
            square.setAttribute("id", `square${idSwitch}`)
            if (isWhite) {
                square.classList.add("black")
                isWhite = false
            } else {
                isWhite = true
            }
            evenRow.appendChild(square)
        }
        board.appendChild(evenRow)
    }
}

和 HTML:

<section id="board-container">
    <div id="board"></div>
</section>

供参考。

然后，当玩家移动时，变量应该保持完全相同，这样，如果他们想恢复到原来的状态，变量仍然存在。

所以，搬家之后，他们有两个选择。要么将移动传给他们的对手，此时 previousState 变量被重新分配给棋盘的新状态（即棋盘在上述移动之后的状态），或者，这就是摩擦，他们可以按下撤消，面板将恢复到轮到他们之前的状态（即 board var 设置的内容）。

简单吧？你在他们走之前分配一个 var ，然后如果他们想收回棋盘，就把棋盘还原给它。否则，将 var 重置为他们离开后董事会的样子。冲洗并重复。

唯一的问题是，由于某种原因，变量在最初定义时和玩家移动后的某个时间发生了变化。发生的事情是玩家离开，变量被记录到控制台。它有父元素 board，然后是所有的行和方块，然后是方块中正确位置的所有棋子。然后玩家移动，变量再次注销，但是现在棋盘元素，现在实际的 HTML 对象，是不同的，并且由于某种原因，从未重新分配的变量反映了如何董事会现在看起来。我不明白为什么，因为它应该保持不变，而不是与董事会同步更新。为什么会这样？

这是一个代码笔，您可以自己检查一下： https://codepen.io/jacklouden/pen/qBaLPdo.

谢谢！

Answer 1

您是否熟悉按引用或按值变量的概念？我猜这是你的问题。

上面已经有一个很好的 SO post。

JavaScript by reference vs. by value

我将直接引用 post 的话来回答这个问题。

” Javascript 总是按值传递，但是当变量引用对象（包括数组）时，“值”是对对象的引用。改变一个变量的值永远不会改变底层的原语或对象，它只是将变量指向一个新的原语或对象。但是，更改变量引用的对象的属性确实会更改基础对象。"

尝试复制您的 html 对象并将其隐藏。我没有深入了解你在做什么，但你正在做 DOM 操作，你需要创建一个包含状态的新 DOM 元素。这应该为您提供所需的重置功能。

变量设置为 HTML object 随着对象的变化

Variable set to HTML object changes with the object

javascript

state

chess

var

dynamically-generated