java script game / 我想通过点击改变一个数字。我该怎么办？答案

【问题标题】：java script game / I want to change one number by clicking on it. What should I do?java script game / 我想通过点击改变一个数字。我该怎么办？
【发布时间】：2021-05-26 20:26:57
【问题描述】：

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>겜블링 게임</title>
    <style>
        table {
            border: 1px solid violet;
            border-collapse: collapse;
        }

        td {
            width: 50px;
            height: 50px;
            padding: 0px;
            font: italic 50px consolas, sans-serif;
            color: blue;
            text-align: center;
            background: linen;
        }

        div#msg {
            font: italic 18px consolas, sans-serif;
            color: magenta;
            margin-top: 10px;
        }
    </style>

    <script>
        // to do
        var gameon = true; 
        var gameArray = [0, 0, 0] 
        function gen(event) {
            if (gameon == false) {
                return;
            }

            // generation 0~2 
            // to do
            else if (gameon == true) {
                
                document.getElementById("first").innerHTML = Math.floor(Math.random() * 3);
                gameArray[0] = document.getElementById("first").innerHTML;
                
                document.getElementById("second").innerHTML = Math.floor(Math.random() * 3);
                gameArray[1] = document.getElementById("second").innerHTML;
                
                document.getElementById("third").innerHTML = Math.floor(Math.random() * 3);
                gameArray[2] = document.getElementById("third").innerHTML;
                

                if (gameArray[0] == gameArray[1] && gameArray[1] == gameArray[2]) {
                    document.getElementById("msg").innerHTML = "Success(click here to do again)";
                    gameon = false;
                }

                else {
                    document.getElementById("msg").innerHTML = "fail(click here to do again)";
                }
            
            }
        }

        function reset() {
            for (var i = 0; i < gameArray.length; i++)
                gameArray[i] = 0;

            document.getElementById("first").innerHTML = 0;
            document.getElementById("second").innerHTML = 0;
            document.getElementById("third").innerHTML = 0;

            gameon = true;
        }
    </script>

</head>

<body>
    <h3>갬블링 게임</h3>
    <hr>
    <table>
        <tr>
            <td id="first" onclick="gen(event)">0</td>
            <td id="second" onclick="gen(event)">0</td>
            <td id="third" onclick="gen(event)">0</td>
        </tr>
    </table>
    <div id="msg" onclick="reset()"></div>

</body>

</html>

每个数字都会变成一个从0到2的随机数字。如果每个人都得到相同的数字，他们就赢了。我想修改（else if）部分，这样如果我点击一个数字，那个数字就会改变。目前的方法是，当你点击时，所有的数字都会改变。该部分需要在不修改的情况下解决。 //我应该怎么做才能只修改//to do的底部？

【问题讨论】：

标签： javascript gambling

【解决方案1】：

一些备注：

在代码中绑定事件处理程序，而不是在 HTML 中
不要将单独的id 属性赋予td 元素。而是使用容器元素 - tr 元素及其子集合。
使用专用函数执行显示
使用event.target.cellIndex，您可以知道点击了哪个数字（0、1 或 2）
条件game == false 可以只是!game，因为我们知道它是一个布尔值
当这个条件失败时，剩下的唯一可能就是game == true，所以没有理由去检查另一个if。
我会在页面上添加一个“重置”按钮。点击按钮比点击成功消息更直观。
请注意，如果您从 0-0-0 开始，然后单击一个数字，则生成 0 的概率为 3 分之一，因此所有三个数字都相同。这感觉很奇怪，因为除了“成功”消息之外，用户看不到任何事情发生。
仅在输入纯文本时不要使用innerHTML。在这种情况下，请使用 textContent 或 innerText。
不要一遍又一遍地使用document.getElementById 读取 DOM，而是在页面加载时执行一次，然后将脚本放在文档内容下方。

这是建议的代码。确保将此脚本放置在您的 HTML 内容下方，就在结束 </body> 标记之前：

var gameon; 
var gameArray = [0, 0, 0];

var elems = document.querySelectorAll("td");
var elems = document.getElementById("numbers").children;
for (let elem of elems) elem.addEventListener("click", gen);

var msg = document.getElementById("msg");
msg.addEventListener("click", reset);

var resetButton = document.getElementById("reset");
resetButton.addEventListener("click", reset);

reset();

function display() {
    msg.textContent = "";
    for (let i = 0; i < gameArray.length; i++) {
        elems[i].textContent = gameArray[i];
    }
    gameon = true;
}

function gen(event) {
    if (!gameon) {
        return;
    }
    let index = event.target.cellIndex;
    gameArray[index] = Math.floor(Math.random() * 3);
    display();
    gameon = gameArray[0] != gameArray[1] || gameArray[1] != gameArray[2];
    document.getElementById("msg").textContent = 
        gameon ? "fail(click here to do again)" 
               : "Success(click here to do again)";
}

function reset() {
    gameArray.fill(0);
    display();
}

table {
    border: 1px solid violet;
    border-collapse: collapse;
}

td {
    width: 50px;
    height: 50px;
    padding: 0px;
    font: italic 50px consolas, sans-serif;
    color: blue;
    text-align: center;
    background: linen;
}

div#msg {
    font: italic 18px consolas, sans-serif;
    color: magenta;
    margin-top: 10px;
}

<h3>갬블링 게임</h3>
<hr>
<table>
    <tr id="numbers">
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
</table>
<button id="reset">Reset</button>
<div id="msg"> </div>

如果您只能更改 else 块，那么请进行：

else {
    let i = event.target.cellIndex;
    gameArray[i] = Math.floor(Math.random() * 3);
    document.getElementById(["first", "second", "third"][i]).textContent = gameArray[i];
    gameon = gameArray[0] != gameArray[1] || gameArray[1] != gameArray[2];
    document.getElementById("msg").textContent = 
        gameon ? "fail(click here to do again)" 
               : "Success(click here to do again)";
}

【讨论】：

非常感谢您的好评。但我不应该修复另一部分。我只能无条件修改elseif和函数reset之间的内容。你能再给我一条建议吗？
我添加了一个部分，其中仅对 else 部分进行了更改，但我坚持认为您应该根据我提出的要点改进其余代码。
哦，非常感谢。我不会忘记你的好意。