利用可能なパラメータの前に関数が実行されています

Question

HTMl CSS（SCSS）とJSでチックタックのつま先を作っています。私は各グリッドスペースにXまたはOを追加する機能を持っていますが、それは自動的にそれらを追加してから、irを実行するための適切なパラメータを持っていますが、それは正しい（ish）です。助けてもらえますか？

は、私もそれがhere.

マイHTML持っている：

<div class="wrap"> 
     <div class="piece one"></div> 
     <div class="piece two"></div> 
     <div class="piece three"></div> 
     <div class="piece four"></div> 
     <div class="piece five"></div> 
     <div class="piece six"></div> 
     <div class="piece seven"></div> 
     <div class="piece eight"></div> 
     <div class="piece nine"></div> 
    </div> 

マイCSS：

body { 
     margin: 0; 
     overflow: hidden; 
    } 

    .wrap { 
     position: absolute; 
     height: 500px; 
     width: 510px; 
     top: 50%; 
     left: 50%; 
     transform: translate(-50%, -50%); 
     display: flex; 
     flex-wrap: wrap; 
     align-content: flex-start; 
    } 

    .piece { 
     width: calc(500px/3); 
     height: calc(500px/3); 
     background: white; 
     cursor: pointer; 
    } 

    .five, .two, .eight { 
     border-left: 5px solid black; 
     border-right: 5px solid black; 
    } 

    .one, .two, .three { 
     border-bottom: 5px solid black; 
    } 

    .seven, .eight, .nine { 
     border-top: 5px solid black; 
    } 

    .x { 
     margin-left: 30px; 
     margin-top: 20px; 
     display: flex; 
     .line { 
     height: calc(400px/3); 
     width: 5px; 
     background: black; 
     &Two { 
      transform: rotate(-45deg); 
      margin-left: -5px; 
     } 
     &One { 
     transform: rotate(45deg); 
      margin-left: 50px; 
     } 
     } 
    } 

    .o { 
     margin-left: 30px; 
     margin-top: 20px; 
     height: 100px; 
     width: 100px; 
     border-radius: 100%; 
     border: 5px solid black; 
    } 

そして、私のJS：

let x = true, 
     o = false, 
     AI = false, 
     easy = true, 
     med = false, 
     hard = false; 
    const one = document.querySelector(".one"), 
     two = document.querySelector(".two"), 
     three = document.querySelector(".three"), 
     four = document.querySelector(".four"), 
     five = document.querySelector(".five"), 
     six = document.querySelector(".six"), 
     seven = document.querySelector(".seven"), 
     eight = document.querySelector(".eight"), 
     nine = document.querySelector(".nine"), 
     X /* The diference between this X and the other x is that this one   is capitalized, same w/ the O and o */ = "<div class='x'><div class='lineOne line'></div><div class='lineTwo line'></div></div>", 
     O = "<div class='o'></div>"; 

    one.addEventListener("click", function() { 
     console.log("goodness happened") 
    }) 

    const tic = function(square) { 
     console.log("test 1 success"); 
     if (x === true) { 
     square.innerHTML = X; 
     x = false; 
     o = true; 
     } 
     else { 
     square.innerHTML = O; 
     x = true; 
     o = false; 
     } 
    } 

    one.addEventListener("click", tic(one), false) 
    two.addEventListener("click", tic(two), false) 
    three.addEventListener("click", tic(three), false) 
    four.addEventListener("click", tic(four), false) 
    five.addEventListener("click", tic(five), false) 
    six.addEventListener("click", tic(six), false) 
    seven.addEventListener("click", tic(seven), false) 
    eight.addEventListener("click", tic(eight), false) 
    nine.addEventListener("click", tic(nine), false) 

申し訳ありませんが、それはたくさんあります。私はあなたに完全な絵を与えたいだけです。前もって感謝します！あなたが関数を呼び出す代わりに、それを参照している

Answer 1

は、匿名関数の代わりに

one.addEventListener("click", function() { 
    tic(one) 
}, false);