Question

从学校接受这项任务以来，我对编程非常陌生。到目前为止，这是我所做的。该程序可以正常启动，但是当我单击一个单元格时，它可以执行我想要的操作，但是出现错误，我感觉自己做错了。请记住，程序尚未完成。

该程序的目的是使用给定的HTML创建一个Tic Tac Toe游戏。这只能由JS制作。任务是编写一个程序，将X放到用户点击的任何单元格上，并带有2个不同的玩家。

我认为问题出在我调用函数时。

我无法编辑HTML。

如果有人可以帮助一个兄弟，我将非常感激。

SELECT MAX(RN) FROM test
WHERE LENGTH(ID)=1 AND (UNICODE(ID) != UNICODE(LOWER(ID))
GROUP BY ID;

var table = ["-", "-", "-", "-", "-", "-", "-", "-", "-"];
var player = 1;

function ex(choice) 
{
  if (player == 1) 
  {
    table[choice - 1] = "X";
    player = 0;
  } 
  else 
  {
    table[choice - 1] = "O";
    player = 1;
  }
  console.log(player + " is playing");
  for (var i = 1; i < 10; i++) 
  {
    document.getElementById("cell" + i).innerHTML = table[i - 1];
  }
}

document.getElementById("cell" + 1).onclick = ex(1);
document.getElementById("cell" + 2).onclick = ex(2);
document.getElementById("cell" + 3).onclick = ex(3);
document.getElementById("cell" + 4).onclick = ex(4);
document.getElementById("cell" + 5).onclick = ex(5);
document.getElementById("cell" + 6).onclick = ex(6);
document.getElementById("cell" + 7).onclick = ex(7);
document.getElementById("cell" + 8).onclick = ex(8);
document.getElementById("cell" + 9).onclick = ex(9);

//for (var count = 1; count < 10; count++)	      	
//{	 	        		 	  	        	      	
//  document.getElementById("cell" + count).onclick = ex(count);
//}

错误：

在事件期间检测到错误：“未定义”上的“呼叫”不是一个函数在第24行处或附近出现错误

我单击任何单元格都会显示此错误，并显示其特定的代码行

Answer 1

代码的问题在于，当您设置所有单元格的onclick属性时，您实际上会调用该函数，从而在其中运行代码。您不希望发生这种情况，因为您只希望单击单元格时执行此操作。因此，您可以将函数调用包装在另一个函数中。这允许您单击onclick按钮，以便随后在函数中调用该函数（允许您将参数传递到ex函数中）。这将解决您当前使用的代码的问题，但是，如果您希望动态创建元素，则可以使用代码底部的for循环。

但是，此for循环存在一个小问题。您需要在

中将var更改为let

for(var count = 1; ...)

之所以这样做，是因为var将使之生效，因此所有函数调用都具有相同的choice值，即10 – count的最后一个值，而您却相反想要具有递增值1, 2, 3 etc...。解决此问题将解决您的问题。

请参见下面的工作示例：

var table = ["-", "-", "-", "-", "-", "-", "-", "-", "-"];
var player = 1;

function ex(choice) {
  console.log(choice);
  if (player == 1) {
    table[choice - 1] = "X";
    player = 0;
  } else {
    table[choice - 1] = "O";
    player = 1;
  }
  console.log(player + " is playing");
  for (var i = 1; i < 10; i++) {
    document.getElementById("cell" + i).innerHTML = table[i - 1];
  }
}


for (let count = 1; count < 10; count++) {
  document.getElementById("cell" + count).onclick = function() {
    ex(count)
  };
}

<table cellpadding="5" border="1">
  <tbody>
    <tr>
      <td id="cell1">-</td>
      <td id="cell2">-</td>
      <td id="cell3">-</td>
    </tr>
    <tr>
      <td id="cell4">-</td>
      <td id="cell5">-</td>
      <td id="cell6">-</td>
    </tr>
    <tr>
      <td id="cell7">-</td>
      <td id="cell8">-</td>
      <td id="cell9">-</td>
    </tr>
  </tbody>
</table>

JavaScript中的零零碎碎

1 个答案: