java script game / I want to change one number by clicking on it. What should I do?

Question

<!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>

Each number changes to a random number from 0 to 2. If everyone gets the same number, they win. I want to modify the (else if) part so that if I click on a number, that number will change. The current method is that when you click, all the numbers change. The part needs to be solved without modification. //What should I do to modify only the bottom part of the //to do?

trincot · Answer 1 · 2021-05-26T21:32:50.247

Some remarks:

Bind event handlers in code, not in HTML
Don't give separate id attributes to the td elements. Instead work with the container element -- the tr element, and its children collection.
Use a dedicated function to perform the display
With event.target.cellIndex you can know which digit was clicked (0, 1 or 2)
The condition game == false can be just !game, since we know it is a boolean
When this condition fails, then the only possibility left is that game == true, so there is no reason to check that with another if.
I would add a "Reset" button to the page. It is more intuitive to click a button than to click a success message.
Please note that if you start out with 0-0-0, and you click on a digit, there is a 1-in-3 probability that you will generate a 0, and so all three digits will be the same. This feels strange, because the user does not see anything happening, except the "Success" message.
Don't use innerHTML when you are only putting plain text. In that case use textContent or innerText.
Instead of reading the DOM with document.getElementById over and over again, do this once when the page loads, and place your script below the document content.

Here is suggested code. Make sure to place this script below your HTML content, just before the closing </body> tag:

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>

If you can only change the else block then make it:

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)";
}

Thank you so much for the good reply. But I shouldn't fix the other part. I can only modify the content between elseif and function reset unconditionally. Can you give me another piece of advice on what to do? — jsson, May 26 '21 at 21:17
I added a section with only the changes to the `else` part, but I insist that you should improve the rest of your code according to the points I have raised. — trincot, May 26 '21 at 21:34

java script game / I want to change one number by clicking on it. What should I do?

1 Answers1