可点击的html表格单元格

Question

我正在做一个井字游戏。我让我的表格单元格可以点击，一旦点击它们就会运行一个名为playPVPGame的函数。首先，O和X随机选择先行。我在页面的一角有文字，表明它的轮到了。最初文本将是“O先行”或“X先行”。然后根据转弯，它将变为“X是下一个”或“O是下一个”。问题是在初始文本之后，转弯不会像我想要的那样来回转动。

Collection.aggregate(
                    {
                        "$group": {
                            "_id": "$user_id",
                            "nameCount": { "$sum": 1 },
                            "branch_id": {
                                "$sum": {
                                    "$cond": [ {"$branch_id":{"$ne":null}} ]
                                }
                            }
                        }
                    },
                    {
                        "$project": {
                            "_id": 0, 
                            "name": "$_id",
                            "nameCount": 1,
                            "branch_id":1            
                        }
                    }
                );

     var $ = function(id) {
    	return document.getElementById(id);
    };
    
    var newGameAction = function()
    {
    	//clear table
    	$("c1").innerHTML = "";
    	$("c2").innerHTML = "";
    	$("c3").innerHTML = "";
    	$("c4").innerHTML = "";
    	$("c5").innerHTML = "";
    	$("c6").innerHTML = "";
    	$("c7").innerHTML = "";
    	$("c8").innerHTML = "";
    	$("c9").innerHTML = "";
    };
    
    var pVpAction = function(elem)
    {
    	var outputTect;
    	var turnCounter = 0;
    	var first_Turn = Math.floor(Math.random() * 2);
    	$("firstTurn").innerHTML = first_Turn;
    	first_turn = $("firstTurn").innerHTML;
    	if(first_turn == 0)
    	{
    		message = "O goes first";
    	}
    	if(first_turn == 1)
    	{
    		message = "X goes first";
    	}
    	$("goNext").innerHTML = message;
    };
    
    var playPVPGame = function(elem) 
    {
    	var turn = $("goNext").innerHTML;
    	var message;
    	if(turn == "O goes first")
    	{
    		elem.style.backgroundColor = "red";
    		elem.innerHTML = "O";
    		turn = "X is next";
    		$("goNext").innerHTML = turn;
    	}
    	if(turn == "X goes first")
    	{
    		elem.style.backgroundColor = "blue";
    		elem.innerHTML = "X";
    		turn = "O is next";
    		$("goNext").innerHTML = turn;
    	}
    	
    	//does not work
    	/*if($("goNext").innerHTML = "X is next")
    	{
    		$("newGame").disabled = true;
    	}*/
    	
    	message = $("goNext").innerHTML;
    	
    	if(message == "X is next")
    	{
    		elem.style.backgroundColor = "blue";
    		elem.innerHTML = "X";
    		message = "O is next";
    		$("goNext").innerHTML = message;
    	}
    	if(message == "O is next")
    	{
    		elem.style.backgroundColor = "red";
    		elem.innerHTML = "O";
    		message = "X is next";
    		$("goNext").innerHTML = message;
    	}
    	
    };
    
    window.onload = function() {
    	$("newGame").onclick = newGameAction;
    	$("playerVplayer").onclick = pVpAction;
    	
    };

table {width:100%}
table tr td{border:1px solid #000;height:50px;}

Answer 1

将当前播放器（＆＃39; X＆＃39; O＆＃39;）存储在变量中，而不是从GUI中读取。

从GUI中读取是不好的做法，你不得不问这个问题，说明为什么会这样。

Answer 2

这里有简化的最小工作示例：https://jsfiddle.net/smajl/nr21zd9e/1/

我强烈建议您将游戏状态存储在一些方便的对象中：

{
  nextTurn: 'X',
  isFirstTurn: true,
  ...
}

您的HTML中也会过早结束</body>，并且代码中还有许多其他小问题。