2
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)
申し訳ありませんが、それはたくさんあります。私はあなたに完全な絵を与えたいだけです。前もって感謝します!あなたが関数を呼び出す代わりに、それを参照している
感謝を使用するすべてのイベントハンドラを変更します!それが私の必要なものです。 – TheAndersMan