-1

I am making a tic-tac-toe game. I have a little problem showing the turn for the player(,,,). The winning playing is showing, but I cannot find my mistake where I am doing wrong, so I cannot make it work. The player turn is not showing.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="x-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>The tic-tac-toe</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <nav>
            <ul>
                <li>MyTictacToe.com</li>
            </ul>
        </nav>

        <div class="gameContainer">
            <div class="Container">
                <div class="box bt-0 bt-l-0"><span class="Btext"></span></div>
                <div class="box bt-0"><span class="Btext"></span></div>
                <div class="box bt-0 bt-r-0"><span class="Btext"></span></div>
                <div class="box bt-l-0"><span class="Btext"></span></div>
                <div class="box"><span class="Btext"></span></div>
                <div class="box bt-r-0"><span class="Btext"></span></div>
                <div class="box bt-b-0 bt-l-0"><span class="Btext"></span></div>
                <div class="box bt-b-0"><span class="Btext"></span></div>
                <div class="box bt-b-0  bt-r-0"><span class="Btext"></span></div>
            </div>

            <div class="gameInfo">
                <h1>Welcome to tic-tac-toe</h1>
                <div>
                    <span class="info">TURN FOR X</span>
                    <button id="reset">reset</button>
                </div>
                <div class="imgbox">
                    <img src="babe.gif" alt="dancing-babe">
                </div>
            </div>
        </div>
    </body>

    <script src="script.js"></script>
</html>

And here comes my JavaScript code. Everything is working, but somehow the turn for player is not coming, only the play won status shows (,,,). I checked many times and I think I am missing something really little and not able to find it. How can I fix it?

var music = new Audio("music.mp3");
var beep = new Audio("beep.mp3");
var gameover = new Audio("gameover.mp3");
let turn = "X"
let isGameover = false;

// Function to change the turn

var changeTurn = ()=>{

    return  turn === "X"?"0":"X"
}

// Function to check for a win

const checkWin = ()=> {
    let boxtexts = document.getElementsByClassName('Btext');
    let wins = [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [0, 4, 8],
        [2, 4, 6],
    ]
    wins.forEach(e =>{
        if((boxtexts[e[0]].innerText === boxtexts[e[1]].innerText) && (boxtexts[e[1]].innerText === boxtexts[e[2]].innerText) && (boxtexts[e[0]].innerText !==" ")){
            document.querySelector('.info').innerText = "player" + boxtexts[e[0]].innerText + "         WON";
            isGameover = true;
        }
    })

}

// Game logic
var boxes = document.getElementsByClassName("box");
Array.from(boxes).forEach((element)=> {
    let boxtext = element.querySelector('.Btext');
    element.addEventListener('click', ()=> {
        if(boxtext.innerText === '') {
            boxtext.innerText = turn;
            turn = changeTurn();
            beep.play();
            checkWin();
            if(!isGameover){
                document.getElementsByClassName("info")[0].innerText  = "Turn for " + turn;
            }
        }
    })
});
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
antima99
  • 59
  • 8
  • Isn't the 'script' tag supposed to be [***before*** the closing *body* tag](https://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup/436425#436425)? – Peter Mortensen Nov 21 '21 at 13:25
  • If the 'script' tag is ***after*** '

    ', [HTML validation](https://pmortensen.eu/temp2/script_tag_after_ending_body_tag_but_before_ending_html_tag.html) will result in *"[Error: Stray start tag script](https://validator.w3.org/nu/?doc=http%3A%2F%2Fpmortensen.eu%2Ftemp2%2Fscript_tag_after_ending_body_tag_but_before_ending_html_tag.html)"* (check option *"source"* and click *"check"* to see the HTML source). If it is ***before***, [it validates](https://pmortensen.eu/temp2/script_tag_before_ending_body_tag.html).

     – Peter Mortensen Nov 21 '21 at 15:13

1 Answers1

0

In wins.forEach the last if check should be
(boxtexts[e[0]].innerText !== "")
instead of
(boxtexts[e[0]].innerText !== " ")

Nikita Skrebets
  • 1,518
  • 2
  • 13
  • 19