TheAndersMan TheAndersMan - 18 days ago 7
CSS Question

Function Running Before Parameters Available

I am making a tic tac toe game with HTMl CSS (SCSS) and JS, and I am running into some trouble. I have a function to add an X or O to each grid space, but it is adding them automatically before it even has the right parameters to do ir, but it is doing it right(ish). Can someone help?

I also have it here.

My HTML:

<div class="wrap">
<div class="piece one"></div>
<div class="piece two"></div>
<div class="piece three"></div>
<div class="piece four"></div>
<div class="piece five"></div>
<div class="piece six"></div>
<div class="piece seven"></div>
<div class="piece eight"></div>
<div class="piece nine"></div>
</div>


My CSS:

body {
margin: 0;
overflow: hidden;
}

.wrap {
position: absolute;
height: 500px;
width: 510px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}

.piece {
width: calc(500px / 3);
height: calc(500px / 3);
background: white;
cursor: pointer;
}

.five, .two, .eight {
border-left: 5px solid black;
border-right: 5px solid black;
}

.one, .two, .three {
border-bottom: 5px solid black;
}

.seven, .eight, .nine {
border-top: 5px solid black;
}

.x {
margin-left: 30px;
margin-top: 20px;
display: flex;
.line {
height: calc(400px / 3);
width: 5px;
background: black;
&Two {
transform: rotate(-45deg);
margin-left: -5px;
}
&One {
transform: rotate(45deg);
margin-left: 50px;
}
}
}

.o {
margin-left: 30px;
margin-top: 20px;
height: 100px;
width: 100px;
border-radius: 100%;
border: 5px solid black;
}


And my JS:

let x = true,
o = false,
AI = false,
easy = true,
med = false,
hard = false;
const one = document.querySelector(".one"),
two = document.querySelector(".two"),
three = document.querySelector(".three"),
four = document.querySelector(".four"),
five = document.querySelector(".five"),
six = document.querySelector(".six"),
seven = document.querySelector(".seven"),
eight = document.querySelector(".eight"),
nine = document.querySelector(".nine"),
X /* The diference between this X and the other x is that this one is capitalized, same w/ the O and o */ = "<div class='x'><div class='lineOne line'></div><div class='lineTwo line'></div></div>",
O = "<div class='o'></div>";

one.addEventListener("click", function() {
console.log("goodness happened")
})

const tic = function(square) {
console.log("test 1 success");
if (x === true) {
square.innerHTML = X;
x = false;
o = true;
}
else {
square.innerHTML = O;
x = true;
o = false;
}
}

one.addEventListener("click", tic(one), false)
two.addEventListener("click", tic(two), false)
three.addEventListener("click", tic(three), false)
four.addEventListener("click", tic(four), false)
five.addEventListener("click", tic(five), false)
six.addEventListener("click", tic(six), false)
seven.addEventListener("click", tic(seven), false)
eight.addEventListener("click", tic(eight), false)
nine.addEventListener("click", tic(nine), false)


Sorry it is a lot. I just want to give you the full picture. Thanks in advance!

Answer

You're calling the function instead of referencing it, change all the event handlers to use an anonymous function instead

one.addEventListener("click", function() {
    tic(one)
}, false);