So i decided to learn javascript and came across a problem I can't solve. I feel stupid asking this because it's probably very simple but basically what i need to do is to get the coordinates of a clicked field and assign an "O" to it. Also when I'm done with that, then I need to take the value of the array at the specific point and change value of whats in html so that i can display the move
"use strict";
const one = document.querySelector(".one");
const two = document.querySelector(".two");
const three = document.querySelector(".three");
const four = document.querySelector(".four");
const five = document.querySelector(".five");
const six = document.querySelector(".six");
const seven = document.querySelector(".seven");
const eight = document.querySelector(".eight");
const nine = document.querySelector(".nine");
let random1;
let random2;
let turn = true;
const moves = [
["", "", ""],
["", "", ""],
["", "", ""],
];
const makeMove = function (e) {
e.preventDefault();
if (turn) {
console.log("p1 made a move");
moves.push("O"); // ofc this doesnt work its here so that i see a move being made
turn = !turn;
} else {
random1 = Math.trunc(Math.random() * 3);
random2 = Math.trunc(Math.random() * 3);
if (moves[random1][random2] !== "X" || "O") {
moves[random1][random2] = "X";
console.log("p2 made a move");
console.log(moves);
turn = !turn;
return 0;
}
}
};
//
one.addEventListener("click", makeMove);
two.addEventListener("click", makeMove);
three.addEventListener("click", makeMove);
four.addEventListener("click", makeMove);
five.addEventListener("click", makeMove);
six.addEventListener("click", makeMove);
seven.addEventListener("click", makeMove);
eight.addEventListener("click", makeMove);
nine.addEventListener("click", makeMove);what i need to do is to get the coordinates of a clicked field and assign an "O" to it
You have to use the info you receive from the "click" event, in order to determine which space the player clicked on.
In your makeMove function, you have e as the parameter, which is the click event. If you type e.target, that will be the HTML element the player clicked on. From there you can type something like e.target.textContent = "O";, and that will put an "O" in the space the player clicked.
const makeMove = function (e) {
e.target.textContent = "O";
}
Also when I'm done with that, then I need to take the value of the array at the specific point and change value of whats in html so that i can display the move
You have to find a way to "link" the spaces on the webpage to the specific positions in the moves array. There's a few ways you can go about this, but we'll work with what you already have down.
I see that you gave the spaces class names like .one, .two, etc. You can find out the class name of the space the player clicked on by using classList on the element. That will return a DOMTokenList (a special type of array) of all the classnames the element has.
HTML:
<div class="one"> </div>
JavaScript:
const makeMoves = function (e) {
console.log(e.target.classList);
//returns DOMTokenList: ["one"]
}
Knowing that info, you can do an action to a specific array element, depending on if the player clicked the right space. Here's an example:
const makeMove = function (e) {
if (e.target.classList.includes("one")) moves[0] = "O";
if (e.target.classList.includes("two")) moves[1] = "O";
}
element.classList has a few different methods/functions that you can play around with, just google it.
I don't want to give you the whole answer, since you're still learning. There's different ways of streamlining the info I gave above and there's better ways of using the click event. But that should give you enough info to get you unstuck.
I'm not sure if you're going through a curriculum or you're learning completely on your own. But google "How to manipulate the DOM" and "events and event handlers", and that should show you everything you need. Good luck :)