如何檢查其中是否有價值

Question

我必須打井字游戲，我很沮喪。 井字游戲板基本上可以正常工作，我可以為每個玩家分別放置X和O，但是當我再次單擊該單元格時，它將用X或O替換它。例如，如果某個單元格中有X，並且您再次單擊它，將出現一個O。 我在這里的問題是，如何檢查所述單元格中是否有X，然后將其保存並使其無法更改。 從那里開始，我想嘗試贏得條件，這可能只是在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 === "")代替。

Answer 2

一種簡單的方法是在用戶選擇事件處理程序后注銷該事件處理程序。 例如document.getElementById("t9").innerHTML = nextTurn; document.getElementById("t9").onclick = null; document.getElementById("t9").innerHTML = nextTurn; document.getElementById("t9").onclick = null;

Answer 3

您使用錯誤的運算符來比較值。 您應該使用比較運算符； ==或===代替賦值運算符= ：

if(document.getElementById("t1").innerHTML = "");

應該：

if(document.getElementById("t1").innerHTML === "");

---

旁注：無需獲取元素的ID即可使用它來查找要處理的元素，然后使用ID獲取對該元素的引用，而只需直接使用對該元素的引用即可。 這大大簡化了事件處理程序代碼：

function clickButton()
{

    if (this.innerHTML === "");
    {
        this.innerHTML = nextTurn;
        turnSwitch();

    }

}

Answer 4

在您的條件（ if子句）中，您使用賦值（ = ）而不是比較器（ === ）。 這意味着，每個時間if被評估，所述innerHTML所討論的元件的重置為空字符串。

if (document.getElementById('...').innerHTML === '') {
    // ...
}

會很好。

Answer 5

一些東西：

if(document.getElementById("t1").innerHTML = "");
{

單個=是賦值，因此您每次都將innerHTML設置為空字符串。 您想要=== （嚴格相等性測試）

其次，您不能在此行的末尾加上分號，我什至不知道此語句的計算結果是什么，但語法不正確if(document.getElementById("t1").innerHTML = "");

第三，Javscript具有“真實性”的概念，這意味着在布爾上下文中評估的任何內容（如if語句將檢查true / false的值）都將轉換為true或false 。

因此，您可以使用真實性來短路正在執行的操作：

if( !document.getElementById("t1").innerHTML ) {

如果沒有 （ !運算符）任何innerHTML，它將起作用。 您還可以通過修復=運算符來明確查找空字符串：

if( document.getElementById("t1").innerHTML === '' ) {

如果您知道類型將相同，則最好使用=== 。 最好的做法是將大括號放在與語句相同的行上。