javascript - 如何检查某物是否有值(value)

Question

我必须制作一个井字游戏，但我被难住了。基本上 Tic Tac Toe 棋盘可以工作，我可以分别为每个玩家放置 X 和 O，但是当我再次单击该单元格时，它会用 X 或 O 替换它。例如，如果一个单元格中有一个 X 并且您再次单击它会出现一个 O。我的问题是，我如何检查所述单元格中是否有 X，然后将其保存在那里并制作它以使其无法更改。从那里我想尝试做获胜条件，这可能只是 if cell1 && cell2 && cell3 === "X"然后就说你赢了或者什么的。无论如何，我们将不胜感激。

谢谢

http://jsfiddle.net/78pu4y7t/11/

var nextTurn = "X";


function clickButton()
{
if(this.id === "t1")
{
	if(document.getElementById("t1").innerHTML = "");
	{
		document.getElementById("t1").innerHTML = nextTurn;
		turnSwitch();
		
	}
}

else if(this.id === "t2")
{
	if (document.getElementById("t2").innerHTML = "");
	{
		document.getElementById("t2").innerHTML = nextTurn;
		turnSwitch();
		
	}
}

else if(this.id === "t3")
{
	if (document.getElementById("t3").innerHTML = "");
	{
		document.getElementById("t3").innerHTML = nextTurn;
		turnSwitch();
		
	}
}

else if(this.id === "t4")
{
	if (document.getElementById("t4").innerHTML = "");
	{
		document.getElementById("t4").innerHTML = nextTurn;
		turnSwitch();
	}
}

else if(this.id === "t5")
{
	if (document.getElementById("t5").innerHTML = "");
	{
		document.getElementById("t5").innerHTML = nextTurn;
		turnSwitch();
	}
}

else if(this.id === "t6")
{
	if (document.getElementById("t6").innerHTML = "");
	{
		document.getElementById("t6").innerHTML = nextTurn;
		turnSwitch();
	}
}

else if(this.id === "t7")
{
	if (document.getElementById("t7").innerHTML = "");
	{
		document.getElementById("t7").innerHTML = nextTurn;
		turnSwitch();
	}
}

else if(this.id === "t8")
{
	if (document.getElementById("t8").innerHTML = "");
	{
		document.getElementById("t8").innerHTML = nextTurn;
		turnSwitch();
	}
}

else if(this.id === "t9")
{
	if (document.getElementById("t9").innerHTML = "");
	{
		document.getElementById("t9").innerHTML = nextTurn;
		turnSwitch();
	}
}

}

document.getElementById("t1").onclick = clickButton;
document.getElementById("t2").onclick = clickButton;
document.getElementById("t3").onclick = clickButton;
document.getElementById("t4").onclick = clickButton;
document.getElementById("t5").onclick = clickButton;
document.getElementById("t6").onclick = clickButton;
document.getElementById("t7").onclick = clickButton;
document.getElementById("t8").onclick = clickButton;
document.getElementById("t9").onclick = clickButton;


function turnSwitch()
{

if(nextTurn === "X")
{
	nextTurn = "O";
}
else
{
	nextTurn = "X";
}
	
}

td{
border: 2px solid green;
height: 100px;
width: 100px;
text-align: center;

}

<table>
	<tr>
		<td id="t1"></td>
		<td id="t2"></td>
		<td id="t3"></td>
	</tr>
	<tr>
		<td id="t4"></td>
		<td id="t5"></td>
		<td id="t6"></td>
	</tr>
	<tr>
		<td id="t7"></td>
		<td id="t8"></td>
		<td id="t9"></td>
	</tr>
</table>

Answer 1

我可以建议一个相当简单的方法吗:

var nextTurn = "X";

// eventObj is the automagically passed Event object:
function clickButton(eventObj) {
  // the target of that event object is the one on which the event originated:
  var clicked = eventObj.target;

  // if the trimmed length of the innerHTML of the clicked element is falsey
  // (so zero), then we go inside the 'if':
  if (!clicked.innerHTML.trim().length) {
    // set the innerHTML of the clicked element:
    clicked.innerHTML = nextTurn;
    // invoke the turnSwitch function:
    turnSwitch();
  }
}

// document.querySelector returns the first and only match to the given
// CSS selector; addEventListener assigns the click event-handling function:
document.querySelector('table').addEventListener('click', clickButton);

function turnSwitch() {
  // if nextTurn is currently 'X', we change it to 'O'; if it's anything other than 'X',
  // we update it to 'X':
  return nextTurn === 'X' ? 'O' : 'X';

}

td {
  border: 2px solid green;
  height: 100px;
  width: 100px;
  text-align: center;
}

<table>
  <tr>
    <td id="t1"></td>
    <td id="t2"></td>
    <td id="t3"></td>
  </tr>
  <tr>
    <td id="t4"></td>
    <td id="t5"></td>
    <td id="t6"></td>
  </tr>
  <tr>
    <td id="t7"></td>
    <td id="t8"></td>
    <td id="t9"></td>
  </tr>
</table>

但值得注意的是，当然，您的原始评估 (if (document.getElementById("t3").innerHTML = "")) 正在分配值(因此评估为真值)，而不是评估并“准确”评估；您需要使用:if (document.getElementById("t3").innerHTML === "") 代替。