I cant stop this function to work once it gives me the result . Please Help!

Language Help JavaScript
, ,
1

I have been trying to figure it out all this afternoon but I just can’t get there.

I made this TicTacToe game which changes the value to “X” or “O” according to the number of the turn.

Now , each time I click on the box it changes from “X” to “O” , and “O” to “X”.

How can I make it , so that the box sticks to either “X” or “O” ???

document.addEventListener("DOMContentLoaded", function(event) {
    let tabuleiro = document.getElementById("quadrados");
    tabuleiro.addEventListener('click', function(){
        console.log(turn++)


    function Player1Value(){
            if (turn == 0 || turn == 2 || turn ==  4 || turn ==  6 ||turn ==  8 ) 
            return true;
            else 
                return false;        
    }  

  function X1(){
        if ( Player1Value() == true){
       return document.getElementById("quadrado2").innerHTML = "X"}
       else {
           return document.getElementById("quadrado2").innerHTML = "O"
       }
    };
     });
    });
2

One strategy you could use for this is to see if there is an existing value for innerHTML before you set it to an X or O. Only update it to X or O if it’s currently blank, for example.

As you build this game out, you’ll see you need to handle other edge cases too. Like if you do check for an existing value and only place the X or O if they click on an empty cell, you’ll need to make sure you don’t count that as their turn.

1 Like
3

Given the amount of topics you are making, I recommend to to make a codepen (or use github, or something like that) so we can see your whole codebase and progress.

Now we get bits and pieces every time, which doesn’t really tempt to help you. Maybe that is just me, that is possible. Its just easier to help if we have all the information

Just an idea.

@selectall is a good suggestion, except that DOM manipulation/interaction is expensive.

I would also create a multi-dimensional array to represent your board in JavaScript,which you could use to check if the move is valid, and then update your associative array and board accordingly

1 Like
4

Sure , I just didn’t knew I could do that !

1 Like
5

@stetim94 That’s absolutely a good suggestion to create a multi-dimensional array to represent the board. Ultimately that’s one of the things that would be necessary as this project progresses in order to efficiently evaluate the win/loss conditions anyway.

A github or codepen would be very helpful.

6

exactly, later even more. Maybe I guided too much already towards the right solution. Sometimes running into this issues/problems yourself can be a really useful learning experience :slight_smile:

glad to hear I am not the only one who thinks that way :slight_smile:

1 Like
7

Here is a codePen with what I have done so far: https://codepen.io/izzypt/pen/GRqgNpo.

I will still have to think how to make a multi-dimensional array to represent the board ,… :thinking: :thinking: