Thiết kế website giá rẻ

Question

Could you guide me on what went wrong? i was expecting a smooth execution of this code.

enter image description here

my js code —

error is =cannot read properties of undefined innerText javascript error………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………


const players = "ab";
function createRandomAlpha() {
    return players.charAt(Math.floor(Math.random() * 1));
}
let bnt = document.querySelectorAll(".btn");

bnt.forEach((box) => {
    box.innerText = "";
});

console.log(typeof bnt);

let rstbtn = document.querySelector("#reset-btn");
let msgWinner = document.querySelector("#msg");
let winnerDiv = document.querySelector(".winner");

let winPatterns = [[0, 1, 2], [0, 3, 6], [2, 5, 8], [1, 4, 7], [0, 4, 8], [2, 4, 6], [, 4, 5], [6, 7, 8]];
const playerTurn = createRandomAlpha();
alert(`${playerTurn}' will make first turn !`);

let turn = false;
if (playerTurn === 'a') {
    turn = true;
}


// a== x , b == 0;

let resetGameFlag = false;
let value = null;
// adding event listners

let winner = "";
function checkWinner() {

    for (let pattern of winPatterns) {

        let pos1 = bnt[pattern[0]].innerText;
        let pos2 = bnt[pattern[1]].innerText;
        let pos3 = bnt[pattern[2]].innerText;

        console.log(pos1, pos2, pos3);

        if (pos1 != "" && pos2 != "" && pos3 != "") {

            if (pos1 == pos2 && pos2 == pos3) {
                winner = declareWinner(pos1);
                disableButtons();

                break;
            }
        }

    }
}

const declareWinner = (value) => {
    if (null != value && value === "x") {
        msgWinner.innerText`Congratulations A is winner`;
        winnerDiv.classList.remove("hide");
        return msgWinner.innerText;

    } else if (null != value && value === "o") {
        msgWinner.innerText`Congratulations B is winner`;
        winnerDiv.classList.remove("hide");
        return msgWinner.innerText;
    }
}
const disableButtons = () => {

    bnt.forEach((box) => {
        box.disabled = true;
    });

}

const enableButtons = () => {

    bnt.forEach((box) => {
        box.disabled = false;
    });

}
const emptyButtons = () => {
    bnt.forEach((box) => {
        box.textContent = "";
    });
}

bnt.forEach((box) => {

    box.addEventListener("click", () => {
        if (turn) {
            box.innerText = "x";
            turn = false;
        }
        else {
            box.innerText = "o";
            turn = true;
        }
        box.disabled = true;
    });

    checkWinner();
});


if (winner === '') {
    alert("Game tied");
}
rstbtn.addEventListener("click", () => {
    enableButtons();
    emptyButtons();
    winnerDiv.classList.add("hide");
    turn = !turn;
});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tic Tac Toe Game</title>
    <link rel="stylesheet" href ="style.css">
   
</head>
<body>
    <div class ="winner hide">
     <p id ="msg"> Winner ! </p>
    </div>
        <h1 class ="h1Id">Tic Tac Toe Game</h1>
        <div class ="container">
        <div class= "game">
        <button class ="btn"></button>
        <button class ="btn"></button>
        <button class ="btn"></button>
        <button class ="btn"></button>
        <button class ="btn"></button>
        <button class ="btn"></button>
        <button class ="btn"></button>
        <button class ="btn"></button>
        <button class ="btn"></button>
        </div>
        </div> 
        <button id="reset-btn">Reset Game</button>
        <script type ="text/javascript" src="app.js"></script>
</body>

</html>
<!DOCTYPE html>

Thiết kế website giá rẻ

Danh mục

Cannot Read property of undefined inner text why it is coming i can’t able to access the innerText