0

I am in a middle of a programming course, but I am stuck on a homework. I have to make a x and 0 game, but I don't want anybody to cheat in my game, so I came up with an idea to disable the button with x or zero on it right after I click it. but i can't do it!! If somebody could help me with that I would be very thankful. here is my code:

let button = document.getElementsByClassName("boardplace")
let symbol = "X"

function zmiana(aard) {
    if (symbol === "X") {
        aard.target.innerText = "X";
        symbol = "0";
    }
    else if (symbol === "0") {
        aard.target.innerText = "0";
        symbol = "X";
    }
    button.disabled = true
}
for (let i = 0; i < button.length; i++) {
    button[i].addEventListener('click', zmiana)
}

If you need my HTML code, then this is it:

<!DOCTYPE html>

    <head>
        <link rel="stylesheet" href="x_and_0.css" />
    </head>
    <body>
        <div class="board">
            <button id="1" class="boardplace">as</button>
            <button id="2" class="boardplace">as</button>
            <button id="3" class="boardplace">as</button>
            <button id="4" class="boardplace">as</button>
            <button id="5" class="boardplace">as</button>
            <button id="6" class="boardplace">as</button>
            <button id="7" class="boardplace">as</button>
            <button id="8" class="boardplace">as</button>
            <button id="9" class="boardplace">as</button>
        </div>
        <script src="x_and_0.js"></script>
    </body>
</html>

Here is my css:

.board {
    border: 10px dashed seagreen;
    height: 640px;
    width: 640px;
    margin: 30px auto;
}
.boardplace {
    position: relative;
    border: 2px dotted red;
    width: 200px;
    height: 200px;
    margin: 5px;
    background-image:radial-gradient(snow, red); 
    font-size: 30px;
}
  • See the answers to the [linked question](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return), `getElementsByClassName` returns a *collection* of elements, not just one. Collections don't have a `disabled` property, so `button.disabled = true` doesn't do anything. I can't immediately find a question about it (I know there is one), but you can tell which button was clicked inside your `zmiana` function by ... – T.J. Crowder Nov 27 '20 at 10:27
  • ... using `this` or [`aard.currentTarget`](https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget) ([`aard.target`](https://developer.mozilla.org/en-US/docs/Web/API/Event/target) also works because your buttons don't have any child elements, but often you want `currentTarget` instead). So `this.disabled = true;` or `aard.currentTarget.disabled = true;`. – T.J. Crowder Nov 27 '20 at 10:28

0 Answers0