Cross and circle game

JavaScript
1

Hi I have created a cross and circle game the games works in the way that when user clicks a div it leaves a circle in there and when the user clicks on it again the field is filled with X symbol an so on and if someone wins the board is reseted and it works perfectly but I have tried to create a button that generates a random move for the user and it works for the first click but then it starts drawing the image in place it has been already created or draws nothing and leaves that error in console

app.js:31 Uncaught RangeError: Maximum call stack size exceeded
    at Math.random (<anonymous>)
    at generateRandomElement (app.js:31:25)
    at generateRandomElement (app.js:95:9)
    at generateRandomElement (app.js:82:9)
    at generateRandomElement (app.js:121:9)
    at generateRandomElement (app.js:121:9)
    at generateRandomElement (app.js:134:9)
    at generateRandomElement (app.js:43:9)
    at generateRandomElement (app.js:43:9)
    at generateRandomElement (app.js:69:9)

the js code :

const squareA = document.getElementById('squareA');
const squareB = document.getElementById('squareB');
const squareC = document.getElementById('squareC');
const squareD = document.getElementById('squareD');
const squareE = document.getElementById('squareE');
const squareF = document.getElementById('squareF');
const squareG = document.getElementById('squareG');
const squareH = document.getElementById('squareH');
const squareI = document.getElementById('squareI');
const divs = document.querySelector('div');
const buttt = document.querySelector('button');
const audio = new Audio ('sound.mp3');
const draw = new Audio ('drawSound.mp3');
const circleSound = new Audio ('circSound.mp3');
const crosSound = new Audio ('croSound.mp3');
let A;
let B;
let C;
let D;
let E;
let F;
let G;
let H;
let I;
let W;
let num = 0;
let q = 0;


function generateRandomElement() {
    q = Math.floor(Math.random() * 9 + 1);
    if (q === 1 && typeof A != "string" && num == 0) {
        squareA.classList.add('elX');
        squareA.classList.remove('elO');
        num++;
        A = "circle";
    }  else if (q === 1 && typeof A != "string" && num == 1) {
        squareA.classList.add('elO');
        squareA.classList.remove('elX');
        num--;
        A = "cross";
    } else if (q === 1 && typeof A == "string") {
        generateRandomElement();
    }
    else if (q === 2 && typeof B != "string" && num == 0) {
        squareB.classList.add('elX');
        squareB.classList.remove('elO');
        num++;
        B = "circle";
    }  else if (q === 2 && typeof B != "string" && num == 1) {
        squareA.classList.add('elO');
        squareA.classList.remove('elX');
        num--;
        B = "cross";
    } else if (q === 2 && typeof B == "string") {
        generateRandomElement();
    }
    else if (q === 3 && typeof C != "string" && num == 0) {
        squareA.classList.add('elX');
        squareA.classList.remove('elO');
        num++;
        C = "circle";
    }  else if (q === 3 && typeof C != "string" && num == 1) {
        squareA.classList.add('elO');
        squareA.classList.remove('elX');
        num--;
        C = "cross";
    } else if (q === 3 && typeof C == "string") {
        generateRandomElement();
    }
    else if (q === 4 && typeof D != "string" && num == 0) {
        squareA.classList.add('elX');
        squareA.classList.remove('elO');
        num++;
        D = "circle";
    }  else if (q === 4 && typeof D != "string" && num == 1) {
        squareA.classList.add('elO');
        squareA.classList.remove('elX');
        num--;
        D = "cross";
    } else if (q === 4 && typeof D == "string") {
        generateRandomElement();
    }
    else if (q === 5 && typeof E != "string" && num == 0) {
        squareA.classList.add('elX');
        squareA.classList.remove('elO');
        num++;
        E = "circle";
    }  else if (q === 5 && typeof E != "string" && num == 1) {
        squareA.classList.add('elO');
        squareA.classList.remove('elX');
        num--;
        E = "cross";
    } else if (q === 5 && typeof E == "string") {
        generateRandomElement();
    }
    else if (q === 6 && typeof F != "string" && num == 0) {
        squareF.classList.add('elX');
        squareF.classList.remove('elO');
        num++;
        F = "circle";
    }  else if (q === 6 && typeof F != "string" && num == 1) {
        squareF.classList.add('elO');
        squareF.classList.remove('elX');
        num--;
        A = "cross";
    } else if (q === 6 && typeof F == "string") {
        generateRandomElement();
    }
    else if (q === 7 && typeof G != "string" && num == 0) {
        squareG.classList.add('elX');
        squareG.classList.remove('elO');
        num++;
        G = "circle";
    }  else if (q === 7 && typeof G != "string" && num == 1) {
        squareG.classList.add('elO');
        squareG.classList.remove('elX');
        num--;
        G = "cross";
    } else if (q === 7 && typeof G == "string") {
        generateRandomElement();
    }
    else if (q === 8 && typeof H != "string" && num == 0) {
        squareH.classList.add('elX');
        squareH.classList.remove('elO');
        num++;
        H = "circle";
    }  else if (q === 8 && typeof H != "string" && num == 1) {
        squareH.classList.add('elO');
        squareH.classList.remove('elX');
        num--;
        H = "cross";
    } else if (q === 8 && typeof H == "string") {
        generateRandomElement();
    }
    else if (q === 9 && typeof I != "string" && num == 0) {
        squareI.classList.add('elX');
        squareI.classList.remove('elO');
        num++;
        I = "circle";
    }  else if (q === 9 && typeof I != "string" && num == 1) {
        squareI.classList.add('elO');
        squareI.classList.remove('elX');
        num--;
        I = "cross";
    } else if (q === 9 && typeof I == "string") {
        generateRandomElement();
    }
}
function addA() {
    
    if (num == 0) {
        squareA.classList.add('elX');
        squareA.classList.remove('elO');
        num++;
        console.log(num);
        A = "circle";
    } else {
        squareA.classList.add('elO');
        squareA.classList.remove('elX');
        num--;
        console.log(num);
        A = "cross";
    }
    checkForWin();
    
}
function addB() {
    
    if (num == 0) {
        squareB.classList.add('elX');
        squareB.classList.remove('elO');
        num++;
        console.log(num);
        B = "circle";
    } else {
        squareB.classList.add('elO');
        squareB.classList.remove('elX');
        num--;
        console.log(num);
        B = "cross";
    }
    checkForWin();
    
}
function addC() {
    
    if (num == 0) {
        squareC.classList.add('elX');
        squareC.classList.remove('elO');
        num++;
        console.log(num);
        C = "circle";
    } else {
        squareC.classList.add('elO');
        squareC.classList.remove('elX');
        num--;
        console.log(num);
        C = "cross";
    }
    checkForWin();
    
}
function addD() {
    
    if (num == 0) {
        squareD.classList.add('elX');
        squareD.classList.remove('elO');
        num++;
        console.log(num);
        D = "circle";
    } else {
        squareD.classList.add('elO');
        squareD.classList.remove('elX');
        num--;
        console.log(num);
        D = "cross";
    }
    checkForWin();
    
}
function addE() {
    
    if (num == 0) {
        squareE.classList.add('elX');
        squareE.classList.remove('elO');
        num++;
        console.log(num);
        E = "circle";
    } else {
        squareE.classList.add('elO');
        squareE.classList.remove('elX');
        num--;
        console.log(num);
        E = "cross";
    }
    checkForWin();
    
}
function addF() {
    
    if (num == 0) {
        squareF.classList.add('elX');
        squareF.classList.remove('elO');
        num++;
        console.log(num);
        F = "circle";
    } else {
        squareF.classList.add('elO');
        squareF.classList.remove('elX');
        num--;
        console.log(num);
        F = "cross";
    }
    checkForWin();
    
}
function addG() {
    
    if (num == 0) {
        squareG.classList.add('elX');
        squareG.classList.remove('elO');
        num++;
        console.log(num);
        G = "circle";
    } else {
        squareG.classList.add('elO');
        squareG.classList.remove('elX');
        num--;
        console.log(num);
        G = "cross";
    }
    checkForWin();
    
}
function addH() {
    
    if (num == 0) {
        squareH.classList.add('elX');
        squareH.classList.remove('elO');
        num++;
        console.log(num);
        H = "circle";
    } else {
        squareH.classList.add('elO');
        squareH.classList.remove('elX');
        num--;
        console.log(num);
        H = "cross";
    }
    checkForWin();
    
}
function addI() {
    
    if (num == 0) {
        squareI.classList.add('elX');
        squareI.classList.remove('elO');
        num++;
        console.log(num);
        I = "circle";
    } else {
        squareI.classList.add('elO');
        squareI.classList.remove('elX');
        num--;
        console.log(num);
        I = "cross";
    }
    checkForWin();
    
}
function clearingTheBoard () {
    squareA.classList.remove('elO');
    squareB.classList.remove('elO');
    squareC.classList.remove('elO');
    squareD.classList.remove('elO');
    squareE.classList.remove('elO');
    squareF.classList.remove('elO');
    squareG.classList.remove('elO');
    squareH.classList.remove('elO');
    squareI.classList.remove('elO');
    
    squareA.classList.remove('elX');
    squareB.classList.remove('elX');
    squareC.classList.remove('elX');
    squareD.classList.remove('elX');
    squareE.classList.remove('elX');
    squareF.classList.remove('elX');
    squareG.classList.remove('elX');
    squareH.classList.remove('elX');
    squareI.classList.remove('elX');
   
    A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
    
}
function playSound () {
    audio.play();
}
divs.addEventListener('click', playSound);
function checkForWin() {
    if (A == "circle" && B == "circle" && C == "circle") {
        circleSound.play();
        alert('circle have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    } else if (D == "circle" && E == "circle" && F == "circle") {
        circleSound.play();
        alert('circle have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    } else if (G == "circle" && H == "circle" && I == "circle") {
        circleSound.play();
        alert('circle have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    } else if (A == "circle" && E == "circle" && I == "circle") {
        circleSound.play();
        alert('circle have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    } else if (G == "circle" && E == "circle" && C == "circle") {
        circleSound.play();
        alert('circle have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    }else if (A == "cross" && B == "cross" && C == "cross") {
        crosSound.play();
        alert('cross have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    } else if (D == "cross" && E == "cross" && F == "cross") {
        crosSound.play();
        alert('cross have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    } else if (G == "cross" && H == "cross" && I == "cross") {
        crosSound.play();
        alert('cross have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    } else if (A == "cross" && E == "cross" && I == "cross") {
        crosSound.play();
        alert('cross have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    } else if (G == "cross" && E == "cross" && C == "cross") {
        crosSound.play();
        alert('cross have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    } else if (A == "cross" && D == "cross" && G == "cross") {
        crosSound.play();
        alert('cross have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    } else if (B == "cross" && E == "cross" && H == "cross") {
        crosSound.play();
        alert('cross have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    } else if (C == "cross" && F == "cross" && I == "cross" ) {
        crosSound.play();
        alert('cross have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    } else if (A == "circle" && D == "circle" && G == "circle") {
        circleSound.play();
        alert('circle have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    } else if (B == "circle" && E == "circle" && H == "circle") {
        circleSound.play();
        alert('circle have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    } else if (C == "circle" && F == "circle" && I == "circle" ) {
        circleSound.play();
        alert('circle have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    }  else if (typeof A === "string" && 
    typeof B === "string" &&
    typeof C === "string" &&
    typeof D === "string" &&
    typeof E === "string" &&
    typeof F === "string" &&
    typeof G === "string" &&
    typeof H === "string" &&
    typeof I === "string"
    ) {
        draw.play();
        alert('that is a draw');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        
        clearingTheBoard();
    }
    
}

the html code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>CaC</title>
</head>
<body>
    <div id="container">
        <div id="squareA" onclick="addA()"  class="element"></div>
        <div id="squareB" onclick="addB()" class="element" ></div>
        <div id="squareC" onclick="addC()" class="element"></div>
        <div id="squareD" onclick="addD()" class="element"></div>
        <div id="squareE" onclick="addE()" class="element"></div>
        <div id="squareF" onclick="addF()" class="element"></div>
        <div id="squareG" onclick="addG()" class="element"></div>
        <div id="squareH" onclick="addH()" class="element"></div>
        <div id="squareI" onclick="addI()" class="element"></div>
    </div>

    <button class="clearingButton" onclick="clearingTheBoard()">clear the board!</button>
    <button  class="Generate" onclick="generateRandomElement()">Generate a move</button>
    <audio id="myAudio">
        <source src="sound.mp3" type="audio/mpeg">
      </audio>
      <audio id="drawSound">
        <source src="drawSound.mp3" type="audio/mpeg">
      </audio>
      <audio id="CrossWonSound">
        <source src="croSound.mp3" type="audio/mpeg">
      </audio>
      <audio id="CirclesWonSound">
        <source src="circSound.mp3" type="audio/mpeg">
      </audio>

    <script src="app.js"></script>
    
</body>
</html>

css code

body {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(255, 125, 255);
}
#container {
    margin-top: 40px;
    width: 700px;
    height: 600px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background-color: black;
}
.element {
    background-color: white;
    border: solid 2px black;
    background-position: center;
    cursor: pointer;
}
.elO {
    background-image: url("ximage.png");
    background-repeat: no-repeat;
}
.elX {
    background-image: url("oimage.png");
    background-repeat: no-repeat;
}
.clearingButton {
    position: absolute;
    width: 200px;
    height: 30px;
    font-size: larger;
    font-family: Arial, Helvetica, sans-serif;
    background-color: green;
    color: white;
    font-weight: 700;
    cursor: pointer;
    bottom: 100px;
    transition: all 200ms;
}
.clearingButton:active {
    background-color: rgba(5, 49, 5, 0.527);
}
.Generate {
    position: absolute;
    width: 200px;
    height: 30px;
    font-size: larger;
    font-family: Arial, Helvetica, sans-serif;
    background-color: green;
    color: white;
    font-weight: 700;
    cursor: pointer;
    bottom: 40px;
    transition: all 200ms;
}
.Generate:active {
    background-color: rgba(5, 49, 5, 0.527);
}
3

ok so it is sort of infinte functio that keeps call itself i understand but how can I do that in different way because I litterally have no idea how to do it I have changed the code to that
but now when the value is same it does nothing and the user would have to press the button again

const squareA = document.getElementById('squareA');
const squareB = document.getElementById('squareB');
const squareC = document.getElementById('squareC');
const squareD = document.getElementById('squareD');
const squareE = document.getElementById('squareE');
const squareF = document.getElementById('squareF');
const squareG = document.getElementById('squareG');
const squareH = document.getElementById('squareH');
const squareI = document.getElementById('squareI');
const divs = document.querySelector('div');
const buttt = document.querySelector('button');
const gene = document.getElementById('Gene');
const audio = new Audio ('sound.mp3');
const draw = new Audio ('drawSound.mp3');
const circleSound = new Audio ('circSound.mp3');
const crosSound = new Audio ('croSound.mp3');
let A;
let B;
let C;
let D;
let E;
let F;
let G;
let H;
let I;
let W;
let num = 0;
let q = 0;


function generateRandomElement() {
    q = Math.floor(Math.random() * 9 + 1);
    if (q === 1 && typeof A != "string" && num == 0) {
        squareA.classList.add('elX');
        squareA.classList.remove('elO');
        num++;
        A = "circle";
        console.log(q);
        checkForWin();
        gene.innerText = "Generate a move";
    }  else if (q === 1 && typeof A != "string" && num == 1) {
        squareA.classList.add('elO');
        squareA.classList.remove('elX');
        num--;
        A = "cross";
        console.log(q);
        checkForWin();
        gene.innerText = "Generate a move";
    } else if (q === 1 && typeof A == "string") {
        q = Math.floor(Math.random() * 9 + 1);
        console.log(q);
        checkForWin();
        gene.innerText = "Press it Again";
    }
    else if (q === 2 && typeof B != "string" && num == 0) {
        squareB.classList.add('elX');
        squareB.classList.remove('elO');
        num++;
        B = "circle";
        console.log(q);
        checkForWin();
        gene.innerText = "Generate a move";
    }  else if (q === 2 && typeof B != "string" && num == 1) {
        squareB.classList.add('elO');
        squareB.classList.remove('elX');
        num--;
        B = "cross";
        console.log(q);
        checkForWin();
        gene.innerText = "Generate a move";
    } else if (q === 2 && typeof B == "string") {
        q = Math.floor(Math.random() * 9 + 1);
        console.log(q);
        checkForWin();
        gene.innerText = "Press it Again";
    }
    else if (q === 3 && typeof C != "string" && num == 0) {
        squareC.classList.add('elX');
        squareC.classList.remove('elO');
        num++;
        C = "circle";
        console.log(q);
        checkForWin();
        gene.innerText = "Generate a move";
    }  else if (q === 3 && typeof C != "string" && num == 1) {
        squareC.classList.add('elO');
        squareC.classList.remove('elX');
        num--;
        C = "cross";
        console.log(q);
        checkForWin();
        gene.innerText = "Generate a move";
    } else if (q === 3 && typeof C == "string") {
        q = Math.floor(Math.random() * 9 + 1);
        console.log(q);
        gene.innerText = "Press it Again";
    }
    else if (q === 4 && typeof D != "string" && num == 0) {
        squareD.classList.add('elX');
        squareD.classList.remove('elO');
        num++;
        D = "circle";
        console.log(q);
        checkForWin();
        gene.innerText = "Generate a move";
    }  else if (q === 4 && typeof D != "string" && num == 1) {
        squareD.classList.add('elO');
        squareD.classList.remove('elX');
        num--;
        D = "cross";
        console.log(q);
        checkForWin();
        gene.innerText = "Generate a move";
    } else if (q === 4 && typeof D == "string") {
        q = Math.floor(Math.random() * 9 + 1);
        console.log(q);
        checkForWin();
        gene.innerText = "Press it Again";
    }
    else if (q === 5 && typeof E != "string" && num == 0) {
        squareE.classList.add('elX');
        squareE.classList.remove('elO');
        num++;
        E = "circle";
        console.log(q);
        checkForWin();
        gene.innerText = "Generate a move";
    }  else if (q === 5 && typeof E != "string" && num == 1) {
        squareE.classList.add('elO');
        squareE.classList.remove('elX');
        num--;
        E = "cross";
        console.log(q);
        checkForWin();
        gene.innerText = "Generate a move";
    } else if (q === 5 && typeof E == "string") {
        q = Math.floor(Math.random() * 9 + 1);
        console.log(q);
        checkForWin();
        gene.innerText = "Press it Again";
    }
    else if (q === 6 && typeof F != "string" && num == 0) {
        squareF.classList.add('elX');
        squareF.classList.remove('elO');
        num++;
        F = "circle";
        console.log(q);
        checkForWin();
        gene.innerText = "Generate a move";
    }  else if (q === 6 && typeof F != "string" && num == 1) {
        squareF.classList.add('elO');
        squareF.classList.remove('elX');
        num--;
        F = "cross";
        console.log(q);
        checkForWin();
        gene.innerText = "Generate a move";
    } else if (q === 6 && typeof F == "string") {
        q = Math.floor(Math.random() * 9 + 1);
        console.log(q);
        checkForWin();
        gene.innerText = "Press it Again";
    }
    else if (q === 7 && typeof G != "string" && num == 0) {
        squareG.classList.add('elX');
        squareG.classList.remove('elO');
        num++;
        G = "circle";
        console.log(q);
        checkForWin();
        gene.innerText = "Generate a move";
    }  else if (q === 7 && typeof G != "string" && num == 1) {
        squareG.classList.add('elO');
        squareG.classList.remove('elX');
        num--;
        G = "cross";
        console.log(q);
        checkForWin();
        gene.innerText = "Generate a move";
    } else if (q === 7 && typeof G == "string") {
        q = Math.floor(Math.random() * 9 + 1);
        console.log(q);
        checkForWin();
        gene.innerText = "Press it Again";
    }
    else if (q === 8 && typeof H != "string" && num == 0) {
        squareH.classList.add('elX');
        squareH.classList.remove('elO');
        num++;
        H = "circle";
        console.log(q);
        checkForWin();
        gene.innerText = "Generate a move";
    }  else if (q === 8 && typeof H != "string" && num == 1) {
        squareH.classList.add('elO');
        squareH.classList.remove('elX');
        num--;
        H = "cross";
        console.log(q);
        checkForWin();
        gene.innerText = "Generate a move";
    } else if (q === 8 && typeof H == "string") {
        q = Math.floor(Math.random() * 9 + 1);
        console.log(q);
        checkForWin();
        gene.innerText = "Press it Again";
    }
    else if (q === 9 && typeof I != "string" && num == 0) {
        squareI.classList.add('elX');
        squareI.classList.remove('elO');
        num++;
        I = "circle";
        console.log(q);
        checkForWin();
        gene.innerText = "Generate a move";
    }  else if (q === 9 && typeof I != "string" && num == 1) {
        squareI.classList.add('elO');
        squareI.classList.remove('elX');
        num--;
        I = "cross";
        console.log(q);
        checkForWin();
        gene.innerText = "Generate a move";
    } else if (q === 9 && typeof I == "string") {
        q = Math.floor(Math.random() * 9 + 1);
        console.log(q);
        checkForWin();
        gene.innerText = "Press it Again";
    }
}
function addA() {
    
    if (num == 0) {
        squareA.classList.add('elX');
        squareA.classList.remove('elO');
        num++;
        console.log(num);
        A = "circle";
    } else {
        squareA.classList.add('elO');
        squareA.classList.remove('elX');
        num--;
        console.log(num);
        A = "cross";
    }
    checkForWin();
    
}
function addB() {
    
    if (num == 0) {
        squareB.classList.add('elX');
        squareB.classList.remove('elO');
        num++;
        console.log(num);
        B = "circle";
    } else {
        squareB.classList.add('elO');
        squareB.classList.remove('elX');
        num--;
        console.log(num);
        B = "cross";
    }
    checkForWin();
    
}
function addC() {
    
    if (num == 0) {
        squareC.classList.add('elX');
        squareC.classList.remove('elO');
        num++;
        console.log(num);
        C = "circle";
    } else {
        squareC.classList.add('elO');
        squareC.classList.remove('elX');
        num--;
        console.log(num);
        C = "cross";
    }
    checkForWin();
    
}
function addD() {
    
    if (num == 0) {
        squareD.classList.add('elX');
        squareD.classList.remove('elO');
        num++;
        console.log(num);
        D = "circle";
    } else {
        squareD.classList.add('elO');
        squareD.classList.remove('elX');
        num--;
        console.log(num);
        D = "cross";
    }
    checkForWin();
    
}
function addE() {
    
    if (num == 0) {
        squareE.classList.add('elX');
        squareE.classList.remove('elO');
        num++;
        console.log(num);
        E = "circle";
    } else {
        squareE.classList.add('elO');
        squareE.classList.remove('elX');
        num--;
        console.log(num);
        E = "cross";
    }
    checkForWin();
    
}
function addF() {
    
    if (num == 0) {
        squareF.classList.add('elX');
        squareF.classList.remove('elO');
        num++;
        console.log(num);
        F = "circle";
    } else {
        squareF.classList.add('elO');
        squareF.classList.remove('elX');
        num--;
        console.log(num);
        F = "cross";
    }
    checkForWin();
    
}
function addG() {
    
    if (num == 0) {
        squareG.classList.add('elX');
        squareG.classList.remove('elO');
        num++;
        console.log(num);
        G = "circle";
    } else {
        squareG.classList.add('elO');
        squareG.classList.remove('elX');
        num--;
        console.log(num);
        G = "cross";
    }
    checkForWin();
    
}
function addH() {
    
    if (num == 0) {
        squareH.classList.add('elX');
        squareH.classList.remove('elO');
        num++;
        console.log(num);
        H = "circle";
    } else {
        squareH.classList.add('elO');
        squareH.classList.remove('elX');
        num--;
        console.log(num);
        H = "cross";
    }
    checkForWin();
    
}
function addI() {
    
    if (num == 0) {
        squareI.classList.add('elX');
        squareI.classList.remove('elO');
        num++;
        console.log(num);
        I = "circle";
    } else {
        squareI.classList.add('elO');
        squareI.classList.remove('elX');
        num--;
        console.log(num);
        I = "cross";
    }
    checkForWin();
    
}
function clearingTheBoard () {
    squareA.classList.remove('elO');
    squareB.classList.remove('elO');
    squareC.classList.remove('elO');
    squareD.classList.remove('elO');
    squareE.classList.remove('elO');
    squareF.classList.remove('elO');
    squareG.classList.remove('elO');
    squareH.classList.remove('elO');
    squareI.classList.remove('elO');
    
    squareA.classList.remove('elX');
    squareB.classList.remove('elX');
    squareC.classList.remove('elX');
    squareD.classList.remove('elX');
    squareE.classList.remove('elX');
    squareF.classList.remove('elX');
    squareG.classList.remove('elX');
    squareH.classList.remove('elX');
    squareI.classList.remove('elX');
   
    A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
    
}
function playSound () {
    audio.play();
}
divs.addEventListener('click', playSound);
function checkForWin() {
    if (A == "circle" && B == "circle" && C == "circle") {
        circleSound.play();
        alert('circle have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    } else if (D == "circle" && E == "circle" && F == "circle") {
        circleSound.play();
        alert('circle have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    } else if (G == "circle" && H == "circle" && I == "circle") {
        circleSound.play();
        alert('circle have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    } else if (A == "circle" && E == "circle" && I == "circle") {
        circleSound.play();
        alert('circle have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    } else if (G == "circle" && E == "circle" && C == "circle") {
        circleSound.play();
        alert('circle have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    }else if (A == "cross" && B == "cross" && C == "cross") {
        crosSound.play();
        alert('cross have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    } else if (D == "cross" && E == "cross" && F == "cross") {
        crosSound.play();
        alert('cross have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    } else if (G == "cross" && H == "cross" && I == "cross") {
        crosSound.play();
        alert('cross have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    } else if (A == "cross" && E == "cross" && I == "cross") {
        crosSound.play();
        alert('cross have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    } else if (G == "cross" && E == "cross" && C == "cross") {
        crosSound.play();
        alert('cross have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    } else if (A == "cross" && D == "cross" && G == "cross") {
        crosSound.play();
        alert('cross have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    } else if (B == "cross" && E == "cross" && H == "cross") {
        crosSound.play();
        alert('cross have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    } else if (C == "cross" && F == "cross" && I == "cross" ) {
        crosSound.play();
        alert('cross have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    } else if (A == "circle" && D == "circle" && G == "circle") {
        circleSound.play();
        alert('circle have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    } else if (B == "circle" && E == "circle" && H == "circle") {
        circleSound.play();
        alert('circle have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    } else if (C == "circle" && F == "circle" && I == "circle" ) {
        circleSound.play();
        alert('circle have won');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        clearingTheBoard();
    }  else if (typeof A === "string" && 
    typeof B === "string" &&
    typeof C === "string" &&
    typeof D === "string" &&
    typeof E === "string" &&
    typeof F === "string" &&
    typeof G === "string" &&
    typeof H === "string" &&
    typeof I === "string"
    ) {
        draw.play();
        alert('that is a draw');
        A = 0;
        B = 0;
        C = 0;
        D = 0;
        E = 0;
        F = 0;
        G = 0;
        H = 0;
        I = 0;
        
        clearingTheBoard();
    }
    
} ```
5

Yes
and I would like to do that one first because I want to make it work at first and then try to make it more efficient because that way I will learn more because I will have to use different approaches. Won’t I? and the code works but in case the value of the random number is same as it was before nothing happens and I want it to draw a cross or circle in another place. CaC The sound is pretty loud

6

Well then start by getting rid of the duplicate code sections in the generateRandomElement function.

Also, don’t use variables names like q or A. Use variable names that describe what the value contained in the variable represents.

Honestly, you need to map out your game logic on a piece of paper first. Write out the actual steps you want to happen with the user and then the computer. I also recommend using a data structure like a one-dimensional array or a two-dimensional array to represent the square matrix containing the x’s and o’s. This way your logic updates the array and then you update the DOM based on the array contents. It will be much easier to determine a winner and whether a square is occupied if the data is in an array. If using a one-dimensional array, you could use indexOf to check if a square is occupied or not.

7

That is because you are calling the generateRandomElement function from within generateRandomElement

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.