Glorpy Posted November 22, 2014 Share Posted November 22, 2014 Hey there guys. I recently have been working on a tic tac toe game and at the moment I am stumped. You see the Tic Tac Toe board shows up fine, and you can place down X's and O's on all 9 cells. The only thing is that if you click the cell again it will switch to either and X or O and you can just keep doing it. Could anybody shed some light on this or shoot some help my way? http://jsfiddle.net/78pu4y7t/6/ Basically I am trying to think of a way to save the letter to the cell, but I can't figure out how. Maybe add a return statement somewhere? Link to comment Share on other sites More sharing options...
Ingolme Posted November 22, 2014 Share Posted November 22, 2014 You can test to see if innerHTML already has a value or not. Link to comment Share on other sites More sharing options...
Glorpy Posted November 22, 2014 Author Share Posted November 22, 2014 You can test to see if innerHTML already has a value or not. How exactly would I do that? Could you perhaps show me? Sorry I am still learning. I am reading about Javascript as we speak. Link to comment Share on other sites More sharing options...
niche Posted November 22, 2014 Share Posted November 22, 2014 console logs http://stackoverflow.com/questions/4539253/what-is-console-log Link to comment Share on other sites More sharing options...
davej Posted November 23, 2014 Share Posted November 23, 2014 <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>tic tac too</title><style>td{border: 2px solid green;height: 100px;width: 100px;text-align: center;}</style><script>window.onerror = function(m, u, l){alert('Javascript Error: '+m+'nURL: '+u+'nLine Number: '+l);return true;}</script><script>var nextTurn; //global varsvar gameEnded;var brd = [];window.onload = init;function init() { nextTurn = 'X'; gameEnded = false; document.getElementById("t1").onclick = clickButton; document.getElementById("t2").onclick = clickButton; document.getElementById("t3").onclick = clickButton; document.getElementById("t4").onclick = clickButton; document.getElementById("t5").onclick = clickButton; document.getElementById("t6").onclick = clickButton; document.getElementById("t7").onclick = clickButton; document.getElementById("t8").onclick = clickButton; document.getElementById("t9").onclick = clickButton;}//end functionfunction clickButton(){ if(this.innerHTML == "" && !gameEnded){ this.innerHTML = nextTurn; var i = Number(this.id.substr(1,1)); //alert(i); brd[i] = (nextTurn=='X')? 1:-1; turnSwitch(); checkGame(); }}//end functionfunction turnSwitch(){ if(nextTurn === "X"){ nextTurn = "O"; }else{ nextTurn = "X"; }}//end functionfunction checkGame(){ var results = []; results[0] = brd[1] + brd[2] + brd[3]; // etc...}//end function</script></head><body><table><tr><td id="t1"></td><td id="t2"></td><td id="t3"></td></tr><tr><td id="t4"></td><td id="t5"></td><td id="t6"></td></tr><tr><td id="t7"></td><td id="t8"></td><td id="t9"></td></tr></table></body> </html> Link to comment Share on other sites More sharing options...
Ingolme Posted November 23, 2014 Share Posted November 23, 2014 How exactly would I do that? Could you perhaps show me? Sorry I am still learning. I am reading about Javascript as we speak. You can use an if() statement to test whether the innerHTML is empty or not: if(element.innerHTML == "") { console logs http://stackoverflow.com/questions/4539253/what-is-console-log How does this solve the problem? Link to comment Share on other sites More sharing options...
dsonesuk Posted November 23, 2014 Share Posted November 23, 2014 (edited) The reason your current script does not work as it is, IS because of if(document.getElementById("t1").innerHTML = ""); it is setting the content of cell to "" empty, NOT a conditional statement checking to see if the cell is empty, also you never end conditional with semi colon as you have should be if(document.getElementById("t1").innerHTML == "") final problem you have '</style>' at bottom of js code, after correcting this it works fine. Edit: just to point out jsfiddle load your script AFTER the html is fully loaded, if not this section document.getElementById("t1").onclick = clickButton; document.getElementById("t2").onclick = clickButton; document.getElementById("t3").onclick = clickButton; document.getElementById("t4").onclick = clickButton; document.getElementById("t5").onclick = clickButton; document.getElementById("t6").onclick = clickButton; document.getElementById("t7").onclick = clickButton; document.getElementById("t8").onclick = clickButton; document.getElementById("t9").onclick = clickButton; would produce an undefined error, to fix try window.onload = function() { document.getElementById("t1").onclick = clickButton; document.getElementById("t2").onclick = clickButton; document.getElementById("t3").onclick = clickButton; document.getElementById("t4").onclick = clickButton; document.getElementById("t5").onclick = clickButton; document.getElementById("t6").onclick = clickButton; document.getElementById("t7").onclick = clickButton; document.getElementById("t8").onclick = clickButton; document.getElementById("t9").onclick = clickButton; } You only really need one if condition, you could use function clickButton() { if (document.getElementById(this.id).innerHTML == "") { document.getElementById(this.id).innerHTML = nextTurn; turnSwitch(); }} Edited November 23, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now