I am currently developing a tic tac toe game using HTMl, CSS (SCSS), and JS. However, I am facing some challenges. The function I created to add an X or O to each grid space seems to be adding them automatically before having the correct parameters, although it somewhat works. Can anyone provide assistance?
You can also check out my progress here.
This is a snippet of my HTML structure:
<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 styles are as follows:
... ...Lastly, here is the logic implemented in my JavaScript:
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>";
...
...
Apologies for the lengthy explanation. I wanted to ensure you have all the necessary details. Thank you for your help!