Advertisement

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

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

JavaScript
​x
 
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;
}

JavaScript
 
*{
    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>

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

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

Advertisement