Hi I 've almost completed this challenge but I’m stuck on two small things. It would be greatly appreciated if anyone could take a look at my codepen to help me resolve them.
first issue: Is to give the user the option to select either X or O to play with. I’ve tried different ways and from what I see my code should work please kindly take a look. I’m still beginner level with jquery and am trying to use it to solve this. Here is how looks below:
$(document).ready(function(){
// Global Variables
var origBoard;
const huPlayer = " ";
const aiPlayer = " ";
// array of winning combos on the board
const winCombos = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[6, 4, 2]
];
const cells = document.querySelectorAll(".cell");
startGame();
$("#x").on("click", function() {
const huPlayer = "X";
const aiPlayer = "O";
});
$("#o").on("click", function() {
const huPlayer = "O";
const aiPlayer = "X";
});
});
second issue: After tinkering around with my code trying to solve the first issue, I stopped and decided to just revert everything to how it was and have it so that huPlayer = X and aiPlayer= O. But they are not appearing on the table any longer. I’ve looked at every line of html css and js to see whats the issue and I can’t figure it out. this is my codepen without trying to allow user to select an x or o. There’s a lot of comments in the js but its mostly notes for myself for understanding and learning – will clean it up before final submission)
Thank you for your time in helping me!