i have tried to make tictactoe using jQuery its working fine but issue is when clear board one of the
field fill automatically,is there any way to prevent it after clear board.
here is my code.Just need to prevent element filled automatically after board is cleared
<script>
jQuery(document).ready(function(){
function clearboard(){
alert('you win');
jQuery('ul li').text('');
}
jQuery('li').click(function(){
// alert(jQuery(this).attr('class'));
if(!jQuery(this).text()){
jQuery(this).text('o');
}
jQuery("li").toggle(
function () {
var temp ='x';
jQuery(this).text(temp);
},
function () {
var temp ='o';
jQuery(this).text(temp);
}
);
if( (jQuery('.f1').text()=='x'&& jQuery('.f5').text()=='x'&& jQuery('.f9').text()=='x')||(jQuery('.f1').text()=='o'&& jQuery('.f5').text()=='o'&& jQuery('.f9').text()=='o')){
clearboard();
}
else if( (jQuery('.f1').text()=='x'&& jQuery('.f2').text()=='x'&& jQuery('.f3').text()=='x')||(jQuery('.f1').text()=='o'&& jQuery('.f2').text()=='o'&& jQuery('.f3').text()=='o')) {
clearboard()
}
else if( (jQuery('.f4').text()=='x'&& jQuery('.f5').text()=='x'&& jQuery('.f6').text()=='x')||(jQuery('.f4').text()=='o'&& jQuery('.f5').text()=='o'&& jQuery('.f6').text()=='o')) {
clearboard();
}
else if( (jQuery('.f7').text()=='x'&& jQuery('.f8').text()=='x'&& jQuery('.f9').text()=='x')||(jQuery('.f7').text()=='o'&& jQuery('.f8').text()=='o'&& jQuery('.f9').text()=='o')) {
clearboard();
}
else if( (jQuery('.f1').text()=='x'&& jQuery('.f4').text()=='x'&& jQuery('.f7').text()=='x')||(jQuery('.f1').text()=='o'&& jQuery('.f4').text()=='o'&& jQuery('.f7').text()=='o')) {
clearboard();
}
else if( (jQuery('.f2').text()=='x'&& jQuery('.f5').text()=='x'&& jQuery('.f8').text()=='x')||(jQuery('.f2').text()=='o'&& jQuery('.f5').text()=='o'&& jQuery('.f8').text()=='o')) {
alert('you win');
clearboard();
}
else if( (jQuery('.f3').text()=='x'&& jQuery('.f6').text()=='x'&& jQuery('.f9').text()=='x')||(jQuery('.f3').text()=='o'&& jQuery('.f6').text()=='o'&& jQuery('.f9').text()=='o')) {
clearboard();
}
else if( (jQuery('.f3').text()=='x'&& jQuery('.f5').text()=='x'&& jQuery('.f7').text()=='x')||(jQuery('.f3').text()=='o'&& jQuery('.f5').text()=='o'&& jQuery('.f7').text()=='o')) {
clearboard();
}
})
</script>
<style>
ul {
float: left;
max-width: 247px;
}
li {
border: 1px solid;
float: left;
font-size: 44px;
height: 60px;
list-style: none outside none;
text-align: center;
vertical-align: top;
width: 60px;
}
</style>
<body>
<ul>
<li class="f1"></li>
<li class="f2"></li>
<li class="f3"></li>
<li class="f4"></li>
<li class="f5"></li>
<li class="f6"></li>
<li class="f7"></li>
<li class="f8"></li>
<li class="f9"></li>
</ul>
her is my fiddle
