javascript - 使用 javascript 的简单 Tic Tac Toe

标签 javascript html tic-tac-toe

所以我对编码完全陌生,而且我在这方面非常糟糕!我尝试创建一个简单的井字游戏板,我需要一个按钮来根据前一个按钮显示的内容来显示 X 或 O 。如何让它返回到上一个按钮?这是我到目前为止所拥有的,它应该非常简单。有谁可以指出我正确的方向吗?

<!DOCTYPE html>
<html>
<head>
<title> Project 8 </title>
</head>
<body>
<p>Click the button once to change its value</p>

<button id="mybtn1" onclick="myFunction1()">&nbsp;</button>
<button id="mybtn2" onclick="myFunction2()">&nbsp;</button>
<button id="mybtn3" onclick="myFunction3()">&nbsp;</button>
<p style="clear:both"></p>
<button id="mybtn4" onclick="myFunction1()">&nbsp;</button>
<button id="mybtn5" onclick="myFunction2()">&nbsp;</button>
<button id="mybtn6" onclick="myFunction3()">&nbsp;</button>
<p style="clear:both"></p>
<button id="mybtn7" onclick="myFunction1()">&nbsp;</button>
<button id="mybtn8" onclick="myFunction2()">&nbsp;</button>
<button id="mybtn9" onclick="myFunction3()">&nbsp;</button>

<p></p>

<script>

    var X= document.getElementById("mybtn1").innerHTML;

function myFunction1() {
    //var X= document.getElementById("mybtn1").innerHTML;
    if (X == "&nbsp;") {
        document.getElementById("mybtn1").innerHTML = "X";
    }
    else (X == "X") {
    document.getElementById("mybtn1").innerHTML = "O";
    }
    else if (X == "O") {
    document.getElementById("mybtn1").innerHTML = "X";
    } 
}

function myFunction2() {
    //var X= document.getElementById("mybtn2").innerHTML;
    if (X == "&nbsp;") {
        X="X"
        document.getElementById("mybtn2").innerHTML = X;
    }
    if (X == "X") {
    document.getElementById("mybtn2").innerHTML = "O";
    } 
    if (X == "O") {
    document.getElementById("mybtn2").innerHTML = "X";
    } 
}

function myFunction3() {
    //var X= document.getElementById("mybtn3").innerHTML;
    if (X == "&nbsp;") {
        document.getElementById("mybtn3").innerHTML = X;
    }
    if (X == "X") {
    document.getElementById("mybtn3").innerHTML = "O";
    } 
    if (X == "O") {
    document.getElementById("mybtn3").innerHTML = "X";
    } 
}
</script>


</body>
</html>

最佳答案

你可以试试这个:

var btn = document.getElementById("mybtn1");
btn.innerHTML = btn.innerHTML === "X" ? "O" : "X";

或者简单地说:

<button onclick="switchIt(this)">&nbsp;</button>//An example of button

还有:

function switchIt(btn) {
    btn.innerHTML = btn.innerHTML === "X" ? "O" : "X";
}

演示: https://jsfiddle.net/iRbouh/6qn9Lz9u/1/

关于javascript - 使用 javascript 的简单 Tic Tac Toe,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38298132/

相关文章:

javascript - 如何使用 JavaScript 在文本框中突出显示搜索到的文本?

javascript - jQuery 验证表单(检查至少 10 个字符和特定值)

c++ - While 循环走得太远了

java - 在 Tic Tac Toe 中使用极小极大的游戏策略?

javascript - 如何将变量值传递到ejs文件中的脚本标记中?

javascript - 将 json api curl 从 javascript 重写为 php

html - CSS 位置 :relative div problem

html - 从两侧裁剪图像并保持居中

php - php代码验证和rowcnt工作正常时遇到麻烦

java - Java 中带有 GUI 的 TicTacToe