如何阻止事件触发两次？

Question

I'm trying to make a Tic-Tac-Toe game to understand Dom Manipulation; I've placed an eventListener() on all the individual divs that are inside the #main-wrap Div. These divs contain SVG's of one cross and one circle that both hold CSS value display:none . How once a player chooses his move do I make sure that the selected div cannot be chosen again? (Because if it does get chosen again it changes it from a cross to a circle). If you can figure it out and please help me.

const section1 = document.querySelector('.section-one');
const mainDiv = document.getElementById('main-wrap');
let whosGo = 0;

for (prop of mainDiv.children) {
    prop.addEventListener('click',addSVGs);
   
}

function addSVGs(e) {
    this.firstElementChild.classList = "cross";
    this.firstElementChild.nextElementSibling.classList = "circle-display";
    whosGo ++;
    if(whosGo % 2 === 0) {
           this.firstElementChild.classList = "cross-display";
           this.firstElementChild.nextElementSibling.classList = "circle";            
        }
      
    }

Answer 1

You should try putting the code for drawing your shapes into an else block.

function addSVGs(e) {
    whosGo ++;
    if(whosGo % 2 === 0) {
           this.firstElementChild.classList = "cross-display";
           this.firstElementChild.nextElementSibling.classList = "circle";            
    }else{
           this.firstElementChild.classList = "cross";
           this.firstElementChild.nextElementSibling.classList = "circle-display";
     }     
}