I am working on a drag and drop tic tac toe game. I had everything working, including the function to check for a winner. Then I added a function to deal with which player's turn it is with the idea being that whichever player's turn it isn't, their images are not draggable. I used a similar idea and code to make all images not draggable when somebody wins the game. However, this function (whoseTurn) does not work and I'm not sure why. I keep getting an error (in Chrome under Sources in Inspect Element) which says Uncaught TypeError Object ...(the location of the picture) has no method "setAttribute". But I know you can use this method on an image as I have used it in two other places in the code. I have printed the array to make sure that the images are in the array and not undefined or something and they are there. It has also broken the checkForWinner function which I'm also not sure why. If anybody can spot my error or lead me in the right direction, it would be much appreciated.
My JavaScript:
var playerOneSpaces = new Array();
var playerTwoSpaces = new Array();
var xImgs = [document.getElementById("drag1").src, document.getElementById("drag2").src,
document.getElementById("drag3").src, document.getElementById("drag4").src,
document.getElementById("drag5").src];
var yImgs = [document.getElementById("drag6").src, document.getElementById("drag7").src,
document.getElementById("drag8").src, document.getElementById("drag9").src,
document.getElementById("drag10").src];
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
var data=ev.dataTransfer.getData("Text");
var target = ev.target || ev.srcElement;
var div = document.getElementById( target.id );
if(target.nodeName.toLowerCase () == "div" ){
var pic = document.getElementById(data);
ev.target.appendChild(pic);
ev.preventDefault();
pic.setAttribute('draggable', false);
switch (data)
{
case 'drag1': case 'drag2': case 'drag3': case 'drag4': case 'drag5':
div.style.backgroundColor = 'dodgerblue';
playerOneSpaces.push(target.id);
whoseTurn(2);
break;
case 'drag6': case 'drag7': case 'drag8': case 'drag9': case 'drag10':
div.style.backgroundColor = 'lightsalmon';
playerTwoSpaces.push(target.id);
whoseTurn(1);
break;
}
}
checkForWinner(playerOneSpaces);
checkForWinner(playerTwoSpaces);
}
function whoseTurn(playerTurn) {
if (playerTurn == 1) {
for (i=0; i<xImgs.length; i++) {
var currentPic = xImgs[i];
currentPic.setAttribute("draggable", true);
}
for (i=0; i<yImgs.length; i++) {
var currentPic = yImgs[i];
currentPic.setAttribute("draggable", false);
}
} else if (playerTurn == 2) {
for (i=0; i<xImgs.length; i++) {
var currentPic = xImgs[i];
currentPic.setAttribute("draggable", false);
}
for (i=0; i<yImgs.length; i++) {
var currentPic = yImgs[i];
currentPic.setAttribute("draggable", true);
}
}
}
function checkForWinner(playerArray) {
var win = false;
var playerOneWin = false;
var playerTwoWin = false;
var pics = document.getElementsByTagName("img");
if (playerArray.sort().join(",") === playerOneSpaces.sort().join(",")) {
playerOneWin = true;
} else if (playerArray.sort().join(",") === playerTwoSpaces.sort().join(",")) {
playerTwoWin = true;
}
for (i=0; i<playerArray.length; i++) {
if (playerArray[i] == "div1") {
var div1 = true;
} else if (playerArray[i] == "div2") {
var div2 = true;
} else if (playerArray[i] == "div3") {
var div3 = true;
} else if (playerArray[i] == "div4") {
var div4 = true;
} else if (playerArray[i] == "div5") {
var div5 = true;
} else if (playerArray[i] == "div6") {
var div6 = true;
} else if (playerArray[i] == "div7") {
var div7 = true;
} else if (playerArray[i] == "div8") {
var div8 = true;
} else if (playerArray[i] == "div9") {
var div9 = true;
}
}
if (div1 && div2 && div3) {
win = true;
} else if (div4 && div5 && div6) {
win = true;
} else if (div7 && div8 && div9) {
win = true;
} else if (div1 && div4 && div7) {
win = true;
} else if (div2 && div5 && div8) {
win = true;
} else if (div3 && div6 && div9) {
win = true;
} else if (div1 && div5 && div9) {
win = true;
} else if (div7 && div5 && div3) {
win = true;
}
if (playerOneWin && win) {
alert("Player One Wins!\n\nReload The Page To Play Again");
for (i=0; i<pics.length; i++) {
var currentPic = pics[i];
currentPic.setAttribute("draggable", false);
}
} else if (playerTwoWin && win) {
alert("Player Two Wins!\n\nReload The Page To Play Again");
for (i=0; i<pics.length; i++) {
var currentPic = pics[i];
currentPic.setAttribute("draggable", false);
}
}
}
My HTML:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<img id="title" src="tictactoe.png" alt="tic tac toe title" />
<h2>Drag the images into the tic-tac-toe board.</h2>
</header>
<section>
<div id="content" class="divTable">
<div class="divRow">
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<div class="divRow">
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<div class="divRow">
<div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div8" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div9" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
</div>
</section>
<footer>
<br />
<img id="drag1" src="X.png" draggable="true"
ondragstart="drag(event)" width="75" height="105" alt="X" />
<img id="drag2" src="X.png" draggable="true"
ondragstart="drag(event)" width="75" height="105" alt="X" />
<img id="drag3" src="X.png" draggable="true"
ondragstart="drag(event)" width="75" height="105" alt="X" />
<img id="drag4" src="X.png" draggable="true"
ondragstart="drag(event)" width="75" height="105" alt="X" />
<img id="drag5" src="X.png" draggable="true"
ondragstart="drag(event)" width="75" height="105" alt="X" /><br />
<img id="drag6" src="O.png" draggable="true"
ondragstart="drag(event)" width="75" height="105" alt="O" />
<img id="drag7" src="O.png" draggable="true"
ondragstart="drag(event)" width="75" height="105" alt="O" />
<img id="drag8" src="O.png" draggable="true"
ondragstart="drag(event)" width="75" height="105" alt="O" />
<img id="drag9" src="O.png" draggable="true"
ondragstart="drag(event)" width="75" height="105" alt="O" />
<img id="drag10" src="O.png" draggable="true"
ondragstart="drag(event)" width="75" height="105" alt="O" />
</footer>
<script src="tictactoe.js"></script>
</body>
</html>