i am create Game tic tac toe but when Start game it’s direct show winners name First Time after Run Game Completely

html javascript

Henil Code

Henil Code

asked 09 Jun, 2022

Code Link : https://github.com/henil11d/TicTacToi

Output : https://henil11d.github.io/TicTacToi/

You Check My Javascript Code On github page Solve My Problem

Problem is -:When Start Game Show Winner Name First Time after Program Run Completely i am already Provided my code and output link please help.

You can update my code in GitHub page and help me

Please Help.

Advertisement

Answer

var c = 1;
function fil(elem) {
    if (c <= 9) {
        if (c % 2 != 0) {
            document.getElementById(elem.id).innerHTML = "X";
            d = 0;
        }
        else {
            document.getElementById(elem.id).innerHTML = "O";
            d = 1;
        }
        c++;
        if (CkeckWin()) {
            if (d == 0) {
                alert("win X");
            }else{
                alert("win O");
            }
            reset();
        }
    } else {
        alert("Match is Draw");
        reset();
    }
}
function reset() {
    for (var i = 1; i <= 9; i++) {
        document.getElementById("d" + i).innerHTML = "";
    }
    c = 1;
}

function CkeckWin() {
    if (didvalue('d1', 'd2', 'd3') || didvalue('d1', 'd5', 'd9') || didvalue('d7', 'd8', 'd9') || didvalue('d1', 'd4', 'd7') ||
        didvalue('d3', 'd6', 'd9') || didvalue('d3', 'd5', 'd7') || didvalue('d4', 'd5', 'd6') || didvalue('d2', 'd5', 'd8')) {
        return true;
    }
}
function didvalue(id1, id2, id3) {
    if (getData(id1) != "" && getData(id2) != "" && getData(id3) != "" &&
        getData(id1) == getData(id2) && getData(id2) == getData(id3)) {
        return true;
    }
}
function getData(Did) {
    return document.getElementById(Did).innerHTML.trim();
}

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: rgb(44, 43, 43);
    text-align: center;
    user-select: none;
}
h1{
    color: aqua;
    font-size: 100px;
    font-family: 'Courier New', Courier, monospace;
    text-shadow: 0 0 6px rgb(234, 236, 122);
    margin-top: 60px;
}
a{
    font-family: sans-serif;
    padding: 15px;
    margin-right: 40px;
    color: rgb(252, 252, 252);
    background-color: rgb(84, 24, 224);
    border-radius: 25px;
    font-size: 28px;
    box-shadow: 0 0 15px 0 rgb(19, 18, 18); 
    border-bottom-left-radius: 5px;
    border-top-right-radius: 5px ;
    text-decoration: none;
    font-weight: bold;
}
a:hover{
    color: black;
    background-color: rgb(1, 198, 247);
    border-radius: 28px;
    box-shadow: 0 0 10px 0 rgb(13, 3, 160); 
    border-top-left-radius: 5px;  
    border-bottom-right-radius: 5px ;
}
a:active{
    color: red;
}
.box{
    border: 3px solid rgb(101, 250, 87);
    height: 170px;
    font-size: 140px;
    width: 170px;
    cursor: pointer;
    color: rgb(3, 176, 182);
    float: left;
}
.box:hover{
    background-color: rgb(106, 109, 109);
}
.box:active{
    background-color: antiquewhite;
}
.main{
    position: relative;
    top: 60px;
    left: 140px;
    width: 800px;
    margin: auto;
    /* display: none; */
}
#d1,#d4,#d7{
    clear: left;
    border-left: none;
}
#d1,#d2,#d3{
    border-top: none;
}
#d3,#d6,#d9{
    border-right: none;
}
#d7,#d8,#d9{
    border-bottom: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
     <title> Henil Code </title>
    <link rel="stylesheet" href="Tecto.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"> </script>
    <script src="te.js"> </script>
</head>
<body>
    <!-- <a href="https://henilcodes.github.io/PH/"> Henil Code </a> -->
    <h1> tic tac toe </h1>
    <div class="main">
        <div id="d1" class="box" onclick="fil(this)">  </div>
        <div id="d2" class="box" onclick="fil(this)">  </div>
        <div id="d3" class="box" onclick="fil(this)">  </div>
        <div id="d4" class="box" onclick="fil(this)">  </div>
        <div id="d5" class="box" onclick="fil(this)">  </div>
        <div id="d6" class="box" onclick="fil(this)">  </div>
        <div id="d7" class="box" onclick="fil(this)">  </div>
        <div id="d8" class="box" onclick="fil(this)">  </div>
        <div id="d9" class="box" onclick="fil(this)">  </div>
    </div>

</body>

</html>

trim() function return like " " to ""

you need to add trim()

Change Code

function getData(Did) {
    return document.getElementById(Did).innerHTML.trim();// trim() data
}