函數在參數可用之前運行

Question

我正在用HTMl CSS（SCSS）和JS製作一個tic tac toe遊戲，而且我遇到了一些麻煩。我有一個函數來爲每個網格空間添加一個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);