I made tictactoe game, I made the winning statement too, but it doesn't work and I don't know why. HTML
<!DOCTYPE html>
<html>
<head>
<script src="tictactoe.js"></script>
<link rel="stylesheet" type="text/css" href="tictactoe.css">
<meta charset="utf-8">
</head>
<body>
<table style="width:100%" style="height:10%" id="table1">
<tr id="vmi">
<td class="cella" id="tr0td1"></td>
<td class="cella" id="tr0td2"></td>
<td class="cella" id="tr0td3"></td>
<td class="cella" id="tr0td4"></td>
<td class="cella" id="tr0td5"></td>
</tr>
<tr>
<td class="cella" id="tr1td1"></td>
<td class="cella" id="tr1td2"></td>
<td class="cella" id="tr1td3"></td>
<td class="cella" id="tr1td4"></td>
<td class="cella" id="tr1td5"></td>
</tr>
<tr>
<td class="cella" id="tr2td1"></td>
<td class="cella" id="tr2td2"></td>
<td class="cella" id="tr2td3"></td>
<td class="cella" id="tr2td4"></td>
<td class="cella" id="tr2td5"></td>
</tr>
<tr>
<td class="cella" id="tr3td1"></td>
<td class="cella" id="tr3td2"></td>
<td class="cella" id="tr3td3"></td>
<td class="cella" id="tr3td4"></td>
<td class="cella" id="tr3td5"></td>
</tr>
<tr>
<td class="cella" id="tr4td1"></td>
<td class="cella" id="tr4td2"></td>
<td class="cella" id="tr4td3"></td>
<td class="cella" id="tr4td4"></td>
<td class="cella" id="tr4td5"></td>
</tr>
</table>
<form>
Character(X or O):
<input type="text" id='character' name='Character' class='editor'>
<label for='tr'>Row: <input id='sor' type='number' min='0' name='Sor'>
<label for='td'>Column: <input id='column'type='number' name='Column' max='5'>
<button type='button' onclick="addXO()">submit</button>
</form>
<button type='button' onclick="winning()">Did I win?</button>
And this is my JS:
function addXO() {
var row = document.getElementById('sor').value;
var column = document.getElementById('column').value;
var character = document.getElementById('character').value;
document.getElementById('tr'+row+'td'+column).innerHTML = character;}
function winning(){
var tr0td1val=document.getElementById("tr0td1").value;
var tr0td2val=document.getElementById("tr0td2").value;
var tr0td3val=document.getElementById("tr0td3").value;
var tr0td4val=document.getElementById("tr0td4").value;
var tr0td5val=document.getElementById("tr0td5").value;
var tr1td1val=document.getElementById("tr1td1").value;
var tr1td2val=document.getElementById("tr1td2").value;
var tr1td3val=document.getElementById("tr1td3").value;
var tr1td4val=document.getElementById("tr1td4").value;
var tr1td5val=document.getElementById("tr1td5").value;
var tr2td1val=document.getElementById("tr2td1").value;
var tr2td2val=document.getElementById("tr2td2").value;
var tr2td3val=document.getElementById("tr2td3").value;
var tr2td4val=document.getElementById("tr2td4").value;
var tr2td5val=document.getElementById("tr2td5").value;
var tr3td1val=document.getElementById("tr3td1").value;
var tr3td2val=document.getElementById("tr3td2").value;
var tr3td3val=document.getElementById("tr3td3").value;
var tr3td4val=document.getElementById("tr3td4").value;
var tr3td5val=document.getElementById("tr3td5").value;
var tr4td1val=document.getElementById("tr4td1").value;
var tr4td2val=document.getElementById("tr4td2").value;
var tr4td3val=document.getElementById("tr4td3").value;
var tr4td4val=document.getElementById("tr4td4").value;
var tr4td5val=document.getElementById("tr4td5").value;
if(tr0td1val == tr0td2val && tr0td2val == tr0td3val && tr0td3val == tr0td4val && tr0td4val == tr0td5val && tr0td1val!= "" && tr0td2val!= "" && tr0td3val!= "" && tr0td4val!= "" && tr0td5val!= "")
{
alert("Player"+tr0td1val+" won!");
}
else if(tr1td1val == tr1td2val && tr1td2val == tr1td3val && tr1td3val == tr1td4val && tr1td4val == tr1d5val && tr1td1val!= "" && tr1td2val!= "" && tr1td3val!= "" && tr1td4val!= "" && tr1td5val!= "")
{
alert("Player"+tr1td1val+" won!");
}
else if(tr2td1val == tr2td2val && tr2td2val == tr2td3val && tr2td3val == tr2td4val && tr2td4val == tr2d5val && tr2td1val!= "" && tr2td2val!= "" && tr2td3val!= "" && tr2td4val!= "" && tr2td5val!= "")
{
alert("Player"+tr2td1val+" won!");
}
else if(tr3td1val == tr3td2val && tr3td2val == tr3td3val && tr3td3val == tr3td4val && tr3td4val == tr3d5val && tr3td1val!= "" && tr3td2val!= "" && tr3td3val!= "" && tr3td4val!= "" && tr3td5val!= "")
{
alert("Player"+tr3td1val+" won!");
}
else if(tr4td1val == tr4td2val && tr4td2val == tr4td3val && tr4td3val == tr4td4val && tr4td4val == tr4d5val && tr4td1val!= "" && tr4td2val!= "" && tr4td3val!= "" && tr4td4val!= "" && tr4td5val!= "")
{
alert("Player"+tr4td1val+" won!");
}
else if(tr0td1val == tr1td1val && tr1td1val == tr2td1val && tr2td1val == tr3td1val && tr3td1val == tr4d1val && tr0td1val!= "" && tr1td1val!= "" && tr2td1val!= "" && tr3td1val!= "" && tr4td1val!= "")
{
alert("Player"+tr0td1val+" won!");
}
else if(tr0td2val == tr1td2val && tr1td2val == tr2td2val && tr2td2val == tr3td2val && tr3td2val == tr4d2val && tr0td2val!= "" && tr1td2val!= "" && tr2td2val!= "" && tr3td2val!= "" && tr4td2val!= "")
{
alert("Player"+tr0td2val+" won!");
}
else if(tr0td3val == tr1td3val && tr1td3val == tr2td3val && tr2td3val == tr3td3val && tr3td3val == tr4d3val && tr0td3val!= "" && tr1td3val!= "" && tr2td3val!= "" && tr3td3val!= "" && tr4td3val!= "")
{
alert("Player"+tr0td3val+" won!");
}
else if(tr0td4val == tr1td4val && tr1td4val == tr2td4val && tr2td4val == tr3td4val && tr3td4val == tr4d4val && tr0td4val!= "" && tr1td4val!= "" && tr2td4val!= "" && tr3td4val!= "" && tr4td4val!= "")
{
alert("Player"+tr0td4val+" won!");
}
else if(tr0td5val == tr1td5val && tr1td5val == tr2td5val && tr2td5val == tr3td5val && tr3td5val == tr4d5val && tr0td5val!= "" && tr1td5val!= "" && tr2td5val!= "" && tr3td5al!= "" && tr4td5val!= "")
{
alert("Player"+tr0td5val+"won!");
}
}
I have no idea why it doesn't work while I declared that if there are 5 X's in a row then the player won, but instead of doing this my code thinks the player always wins. And i have another question, I made this JS but I had to make PHP too (teacher asked us to do it) and JS and PHP don't run at the same time.
The mistake that breaks your code is, that you are accessing "value" of td elements, but they don't have any. (so all return undefined, which is not equal to "".
To fix this replace document.getElementById("tr0td1").value with document.getElementById("tr0td1").innerHTML (for all cells)
I also recommend using innerText insted of innerHTML everywhere, where you don't want to insert HTML code.
You also don't need to check all cells for not being "". If you check the first one and that they are all the same, others cannot be "".
if(tr0td1val != "" && tr0td1val == tr0td2val && tr0td2val == tr0td3val && tr0td3val == tr0td4val && tr0td4val == tr0td5val) is enough.