I've been trying to make a tic-tac-toe game but for some reason, the conditional isn't working..
I tried to target the first three elements on the first row and if they all were the same color, I wanted to browser to alert a "win" pop-up, but it doesn't happen.
Does anyone have an idea why?
Here's my code:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="tic.css">
</head>
<body>
<div id = "total">
<button id ="one" class="knobs"></button>
<button id ="two" class="knobs"></button>
<button id ="three" class="knobs"></button>
<br>
<button id ="four" class="knobs"></button>
<button id ="five" class="knobs"></button>
<button id ="six" class="knobs"></button>
<br>
<button id ="seven" class="knobs"></button>
<button id ="eight" class="knobs"></button>
<button id ="nine" class="knobs"></button>
</div>
<script type="text/javascript" src ="tic.js"></script>
</body>
</html>
and here's the css:
.knobs{
background-color: blue;
border: none;
padding:50px;
margin:10px;
}
.knobs:focus{
outline: none;
}
#total{
text-align: center;
}
and finally the javascript:
var one = document.getElementById("one");
var two = document.getElementById("two");
var three = document.getElementById("three");
var four = document.getElementById("four");
var five = document.getElementById("five");
var six = document.getElementById("six");
var seven = document.getElementById("seven");
var eight = document.getElementById("eight");
var nine = document.getElementById("nine");
var counter = 1;
//code that changes the box color
one.addEventListener("click", function(){
if(counter < 10 && counter%2 === 0){
one.style.backgroundColor = "yellow";
}
else if(counter < 10 && counter%2 != 0){
one.style.backgroundColor = "red";
}
counter++;
console.log(counter);
});
two.addEventListener("click", function(){
if(counter < 10 && counter%2 === 0){
two.style.backgroundColor = "yellow";
}
else if(counter < 10 && counter%2 != 0){
two.style.backgroundColor = "red";
}
counter++;
console.log(counter);
});
three.addEventListener("click", function(){
if(counter < 10 && counter%2 === 0){
three.style.backgroundColor = "yellow";
}
else if(counter < 10 && counter%2 != 0){
three.style.backgroundColor = "red";
}
counter++;
console.log(counter);
});
four.addEventListener("click", function(){
if(counter < 10 && counter%2 === 0){
four.style.backgroundColor = "yellow";
}
else if(counter < 10 && counter%2 != 0){
four.style.backgroundColor = "red";
}
counter++;
console.log(counter);
});
five.addEventListener("click", function(){
if(counter < 10 && counter%2 === 0){
five.style.backgroundColor = "yellow";
}
else if(counter < 10 && counter%2 != 0){
five.style.backgroundColor = "red";
}
counter++;
console.log(counter);
});
six.addEventListener("click", function(){
if(counter < 10 && counter%2 === 0){
six.style.backgroundColor = "yellow";
}
else if(counter < 10 && counter%2 != 0){
six.style.backgroundColor = "red";
}
counter++;
console.log(counter);
});
seven.addEventListener("click", function(){
if(counter < 10 && counter%2 === 0){
seven.style.backgroundColor = "yellow";
}
else if(counter < 10 && counter%2 != 0){
seven.style.backgroundColor = "red";
}
counter++;
console.log(counter);
});
eight.addEventListener("click", function(){
if(counter < 10 && counter%2 === 0){
eight.style.backgroundColor = "yellow";
}
else if(counter < 10 && counter%2 != 0){
eight.style.backgroundColor = "red";
}
counter++;
console.log(counter);
});
nine.addEventListener("click", function(){
if(counter < 10 && counter%2 === 0){
nine.style.backgroundColor = "yellow";
}
else if(counter < 10 && counter%2 != 0){
nine.style.backgroundColor = "red";
}
counter++;
console.log(counter);
});
//logic for winning
if(one.style.backgroundColor == "red" && two.style.backgroundColor == "red" && three.style.backgroundColor == "red"){
console.log("red wins");
}
Your help will be much appreciated!
Aucun commentaire:
Enregistrer un commentaire