Question

我正在创建一个小型的tic-tac-toe游戏，到目前为止它只是一个按钮表，当你点击一个按钮时它会显示值（无论是'X'还是'O'）。这是代码：

function play(){
  var dimension = parseInt(document.getElementById("dimension").value);
  var winCondition = parseInt(document.getElementById("win-condition").value);
  var board = document.getElementById('space');
  table = document.createElement('table');
  board.appendChild(table);

  for (var i = 0; i < winCondition; i++) {
    var row = table.insertRow(i);
    for (var j = 0; j < winCondition; j++) {
      var cell = row.insertCell(j);
      button = document.createElement("button");
      cell.appendChild(button);
      button.style.height = '50px';
      button.style.width = '50px';
      button.style.border = 'none';
      button.style.backgroundColor = '#333';
      button.style.color = '#000';
      button.addEventListener("click", function(){
        button.innerHTML = "X";
      });
    }
  }

  document.getElementById("play").onclick = false;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tic Tac Toe</title>
  <script src="application.js" type="text/javascript"></script>
</head>
<body>
  <p>Enter dimension: <br><input type="text" id="dimension"></p>
  <p>Enter winning condition: <br><input type="text" id="win-condition"></p>
  <button type="submit" onclick="play()" id="play">Play</button>
  <div id="space"></div>
</body>
</html>

当我点击一个随机按钮时，它的innerHTML不会改变。唯一更改的按钮是最后一个按钮，虽然我没有点击它。

还有一个问题：如何获得按钮的ID以检查胜利条件？例如，您可以button[i].value吗？

P.s：我不使用jQuery，谢谢。

Answer 1

问题是button是一个对象。所以它将作为参考传递。

此外，由于您没有使用var来定义它，因此它是全局的。因此，当您执行button.innerHTML时，它指向最后一个按钮。

您应该使用this.innerHTML = 'X'

示例代码

＆＃13;

function play(){
  var dimension = parseInt(document.getElementById("dimension").value);
  var winCondition = parseInt(document.getElementById("win-condition").value);
  var board = document.getElementById('space');
  table = document.createElement('table');
  board.appendChild(table);

  for (var i = 0; i < winCondition; i++) {
    var row = table.insertRow(i);
    for (var j = 0; j < winCondition; j++) {
      var cell = row.insertCell(j);
      var button = document.createElement("button");
      cell.appendChild(button);
      button.style.height = '50px';
      button.style.width = '50px';
      button.style.border = 'none';
      button.style.backgroundColor = '#333';
      button.style.color = '#000';
      button.addEventListener("click", function(){
        this.innerHTML = "X";
      });
    }
  }

  document.getElementById("play").onclick = false;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tic Tac Toe</title>
  <script src="application.js" type="text/javascript"></script>
</head>
<body>
  <p>Enter dimension: <br><input type="text" id="dimension"></p>
  <p>Enter winning condition: <br><input type="text" id="win-condition"></p>
  <button type="submit" onclick="play()" id="play">Play</button>
  <div id="space"></div>
</body>
</html>

＆＃13;

同样作为建议，不要多次使用button.style...，而是定义 css类，只需将此类添加到元素即可。这将使您的代码更清晰。

此外，不是使用内联函数，而是创建一个命名函数并传递其引用。这将确保不会创建相同功能的多个副本。

＆＃13;

function play() {
  var dimension = parseInt(document.getElementById("dimension").value);
  var winCondition = parseInt(document.getElementById("win-condition").value);
  var board = document.getElementById('space');
  table = document.createElement('table');
  board.appendChild(table);

  for (var i = 0; i < winCondition; i++) {
    var row = table.insertRow(i);
    for (var j = 0; j < winCondition; j++) {
      var cell = row.insertCell(j);
      var button = document.createElement("button");
      button.classList.add("myButton");
      cell.appendChild(button);
      button.addEventListener("click", handleClick);
    }
  }

  document.getElementById("play").onclick = false;
}

function handleClick() {
  this.innerHTML = "X";
}

＆＃13;

.myButton {
  height:50px;
  width:50px;
  border:none;
  background-color:#333;
  color: #eee;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Tic Tac Toe</title>
  <script src="application.js" type="text/javascript"></script>
</head>

<body>
  <p>Enter dimension: <br><input type="text" id="dimension"></p>
  <p>Enter winning condition: <br><input type="text" id="win-condition"></p>
  <button type="submit" onclick="play()" id="play">Play</button>
  <div id="space"></div>
</body>

</html>

＆＃13;

Answer 2

这将有效

＆＃13;

var counter=0;
function play(){
  var dimension = parseInt(document.getElementById("dimension").value);
  var winCondition = parseInt(document.getElementById("win-condition").value);
  var board = document.getElementById('space');
  table = document.createElement('table');
  board.appendChild(table);

  for (var i = 0; i < winCondition; i++) {
    var row = table.insertRow(i);
    for (var j = 0; j < winCondition; j++) {
      var cell = row.insertCell(j);
      button = document.createElement("button");
      cell.appendChild(button);
      button.style.height = '50px';
      button.style.width = '50px';
      button.style.border = 'none';
      button.style.backgroundColor = '#333';
      button.style.color = '#000';
      button.addEventListener("click", function(){
      
      if(this.innerHTML !="")
        return;
      else if(counter%2==0)
        this.innerHTML ="x";
      else if(counter%2==1)
        this.innerHTML ="0";
      counter+=1;
      });
    }
  }

  document.getElementById("play").onclick = false;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tic Tac Toe</title>
  <script src="application.js" type="text/javascript"></script>
</head>
<body>
  <p>Enter dimension: <br><input type="text" id="dimension"></p>
  <p>Enter winning condition: <br><input type="text" id="win-condition"></p>
  <button type="submit" onclick="play()" id="play">Play</button>
  <div id="space"></div>
</body>
</html>

＆＃13;

按钮onlick事件不起作用

2 个答案: