I am new to JavaScript and was assigned to make a Tic Tac Toe game using only the canvas tag. I have the canvas done, got the Xs and Os working, and now I am trying to write a code to check the winners. After finishing, however, I received the error "Uncaught ReferenceError: Invalid left-hand side in assignment" for the first line under the function 'checkForWinners.'
I was wondering if anyone could tell me why and help me find a solution to fix it.
Thank you for your time.
P.S I do not know jquery.
<head>
<title>Christin's Project 7</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="p6.css"> </link>
<script>
var turn = 0;
var winningCombinations;
var content = new Array();
var w1x;
var w1o;
var w2x;
var w2o;
var w3x;
var w3o;
var w4x;
var w4o;
var w5x;
var w5o;
var w6x;
var w6o;
var w7x;
var w7o;
var w8x;
var w8o;
var w9x;
var w9o;
var numfilled = 0;
//window.onload = function() {
//winningCombinations = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];
function canvasClicked() { //calling canvas number
var c = document.getElementById("myCanvas1");
var ctx = c.getContext("2d");
if(turn%2==0){
ctx.beginPath();
ctx.moveTo(150,0);//one line
ctx.lineTo(0,150);
ctx.moveTo(0,0); //the other line
ctx.lineTo(150,150);
ctx.stroke();//what actually draws the lines
ctx.closePath();//finished drawing
var w1x = true;
} else{
ctx.beginPath();
ctx.arc(25,25,20,0,Math.PI*2,true);
ctx.stroke();
ctx.closePath();
var w1o = true;
}
turn++;
numfilled++;
content.push(1);
if(numfilled == 9){
alert("THE GAME IS OVER!");
}
}
function canvasClicked2() {
var c2 = document.getElementById("myCanvas2");
var ctx2 = c2.getContext("2d");
if(turn%2==0){
ctx2.beginPath();
ctx2.moveTo(150,0);//one line
ctx2.lineTo(0,150);
ctx2.moveTo(0,0); //the other line
ctx2.lineTo(150,150);
ctx2.stroke();//what actually draws the lines
ctx2.closePath();//finished drawing
var w2x = true;
} else{
ctx2.beginPath();
ctx2.arc(25,25,20,0,Math.PI*2,true);
ctx2.stroke();
ctx2.closePath();
var w2o = true;
}
turn++;
numfilled++;
content.push(2);
if(numfilled == 9){
alert("THE GAME IS OVER!");
}
}
function canvasClicked3() {
var c3 = document.getElementById("myCanvas3");
var ctx3 = c3.getContext("2d");
if(turn%2==0){
ctx3.beginPath();
ctx3.moveTo(150,0);//one line
ctx3.lineTo(0,150);
ctx3.moveTo(0,0); //the other line
ctx3.lineTo(150,150);
ctx3.stroke();//what actually draws the lines
ctx3.closePath();//finished drawing
var w3x = true;
} else{
ctx3.beginPath();
ctx3.arc(25,25,20,0,Math.PI*2,true);
ctx3.stroke();
ctx3.closePath();
var w3o = true;
}
turn++;
numfilled++;
content.push(3);
if(numfilled == 9){
alert("THE GAME IS OVER!");
}
}
function canvasClicked4() {
var c4 = document.getElementById("myCanvas4");
var ctx4 = c4.getContext("2d");
if(turn%2==0){
ctx4.beginPath();
ctx4.moveTo(150,0);//one line
ctx4.lineTo(0,150);
ctx4.moveTo(0,0); //the other line
ctx4.lineTo(150,150);
ctx4.stroke();//what actually draws the lines
ctx4.closePath();//finished drawing
var w4x = true;
} else{
ctx4.beginPath();
ctx4.arc(25,25,20,0,Math.PI*2,true);
ctx4.stroke();
ctx4.closePath();
var w4o = true;
}
turn++;
numfilled++;
content.push(4);
if(numfilled == 9){
alert("THE GAME IS OVER!");
}
}
function canvasClicked5() {
var c5 = document.getElementById("myCanvas5");
var ctx5 = c5.getContext("2d");
if(turn%2==0){
ctx5.beginPath();
ctx5.moveTo(150,0);//one line
ctx5.lineTo(0,150);
ctx5.moveTo(0,0); //the other line
ctx5.lineTo(150,150);
ctx5.stroke();//what actually draws the lines
ctx5.closePath();//finished drawing
var w5x = true;
} else{
ctx5.beginPath();
ctx5.arc(25,25,20,0,Math.PI*2,true);
ctx5.stroke();
ctx5.closePath();
var w5o = true;
}
turn++;
numfilled++;
content.push(5);
if(numfilled == 9){
alert("THE GAME IS OVER!");
}
}
function canvasClicked6() {
var c6 = document.getElementById("myCanvas6");
var ctx6 = c6.getContext("2d");
if(turn%2==0){
ctx6.beginPath();
ctx6.moveTo(150,0);//one line
ctx6.lineTo(0,150);
ctx6.moveTo(0,0); //the other line
ctx6.lineTo(150,150);
ctx6.stroke();//what actually draws the lines
ctx6.closePath();//finished drawing
var w6x = true;
} else{
ctx6.beginPath();
ctx6.arc(25,25,20,0,Math.PI*2,true);
ctx6.stroke();
ctx6.closePath();
var w6o = true;
}
turn++;
numfilled++;
content.push(6);
if(numfilled == 9){
alert("THE GAME IS OVER!");
}
}
function canvasClicked7() {
var c7 = document.getElementById("myCanvas7");
var ctx7 = c7.getContext("2d");
if(turn%2==0){
ctx7.beginPath();
ctx7.moveTo(150,0);//one line
ctx7.lineTo(0,150);
ctx7.moveTo(0,0); //the other line
ctx7.lineTo(150,150);
ctx7.stroke();//what actually draws the lines
ctx7.closePath();//finished drawing
var w7x = true;
} else{
ctx7.beginPath();
ctx7.arc(45,45,20,0,Math.PI*2,true);
ctx7.stroke();
ctx7.closePath();
var w7o = true;
}
turn++;
numfilled++;
content.push(7);
if(numfilled == 9){
alert("THE GAME IS OVER!");
}
}
function canvasClicked8() {
var c8 = document.getElementById("myCanvas8");
var ctx8 = c8.getContext("2d");
if(turn%2==0){
ctx8.beginPath();
ctx8.moveTo(150,0);//one line
ctx8.lineTo(0,150);
ctx8.moveTo(0,0); //the other line
ctx8.lineTo(150,150);
ctx8.stroke();//what actually draws the lines
ctx8.closePath();//finished drawing
var w8x = true;
} else{
ctx8.beginPath();
ctx8.arc(45,45,20,0,Math.PI*2,true);
ctx8.stroke();
ctx8.closePath();
var w8o = true;
}
turn++;
numfilled++;
content.push(8);
if(numfilled == 9){
alert("THE GAME IS OVER!");
}
}
function canvasClicked9() {
var c9 = document.getElementById("myCanvas9");
var ctx9 = c9.getContext("2d");
if(turn%2==0){
ctx9.beginPath();
ctx9.moveTo(150,0);//one line
ctx9.lineTo(0,150);
ctx9.moveTo(0,0); //the other line
ctx9.lineTo(150,150);
ctx9.stroke();//what actually draws the lines
ctx9.closePath();//finished drawing
var w9x = true;
} else{
ctx9.beginPath();
ctx9.arc(25,25,20,0,Math.PI*2,true);
ctx9.stroke();
ctx9.closePath();
var w9o = true;
}
turn++;
numfilled++;
content.push(9);
if(numfilled == 9){
alert("THE GAME IS OVER!");
}
}
function checkForWinners(){
if( w1x = true w2x = true && w3x == true) {
alert( "X WON!");
}
/*
if(w4x = true && w5x = true && w6x = true) {
alert( "X WON!");
}
if(w7x = true && w8x = true && w9x = true) {
alert( "X WON!");
}
if(w1x = true && w4x = true && w7x == true) {
alert( "X WON!");
}
if(w2x = true && w5x = true && w8x == true) {
alert( "X WON!");
}
if(w3x = true && w6x = true && w9x == true) {
alert( "X WON!");
}
if(w3x = true && w5x = true && w8x == true) {
alert( "X WON!");
}
if(w1x = true && w5x = true && w9x == true) {
alert( "X WON!");
}
if(w1o = true && w2o = true && w3o == true) {
alert( "O WON!");
}
if(w4o = true && w5o = true && w6o = true) {
alert( "O WON!");
}
if(w7o = true && w8o = true && w9o = true) {
alert( "O WON!");
}
if(w1o = true && w4o = true && w7o = true) {
alert( "O WON!");
}
if(w2o = true && w5o = true && w8o = true) {
alert( "O WON!");
}
if(w3o = true && w6o = true && w9o = true) {
alert( "O WON!");
}
if(w3o = true && w5o = true && w8o = true) {
alert( "O WON!");
}
if(w1o = true && w5o = true && w9o = true) {
alert( "O WON!");
}
*/
}
</script>
</head>
<body>
<h3>Welcome </h3><h2>to</h2><h1> Tic - Tac - Toe!</h1>
<h4> Instructions: To play Tic-tac-toe, you and another player take turns marking the spaces on the grid.<br> After assigning which player is the X or the O, The player who succeeds in placing three respective Xs or Os in a horizontal, vertical, or diagonal row wins the game.<br> If neither player succeeds, play again.</h4>
<canvas id="myCanvas1" width="150" height="150" style="border:1px solid #c3c3c3;" onclick="canvasClicked()"> </canvas>
<canvas id="myCanvas2" width="150" height="150" style="border:1px solid #c3c3c3;" onclick="canvasClicked2()"> </canvas>
<canvas id="myCanvas3" width="150" height="150" style="border:1px solid #c3c3c3;" onclick="canvasClicked3()"> </canvas> <br>
<canvas id="myCanvas4" width="150" height="150" style="border:1px solid #c3c3c3;" onclick="canvasClicked4()"> </canvas>
<canvas id="myCanvas5" width="150" height="150" style="border:1px solid #c3c3c3;" onclick="canvasClicked5()"> </canvas>
<canvas id="myCanvas6" width="150" height="150" style="border:1px solid #c3c3c3;" onclick="canvasClicked6()"> </canvas> <br>
<canvas id="myCanvas7" width="150" height="150" style="border:1px solid #c3c3c3;" onclick="canvasClicked7()"> </canvas>
<canvas id="myCanvas8" width="150" height="150" style="border:1px solid #c3c3c3;" onclick="canvasClicked8()"> </canvas>
<canvas id="myCanvas9" width="150" height="150" style="border:1px solid #c3c3c3;" onclick="canvasClicked9()"> </canvas> <br>
</body>
Where you write
if( w1x = true w2x = true && w3x == true) {
did you mean
if( w1x==true && w2x == true && w3x == true) {
or even better
if( w1x && w2x && w3x) {