1
私はチック・タック・トー・ゲームをしようとしていましたが、何らかの理由で条件が機能していません。背景色の条件付きなら？
最初の行の最初の3つの要素を対象にしようとしました。同じ色で、ブラウザに "勝利"ポップアップを警告したかったのですが、それは起こりません。
なぜ誰も考えがありますか？
は、ここに私のコードです：
var one = document.getElementById("one");
var two = document.getElementById("two");
var three = document.getElementById("three");
var four = document.getElementById("four");
var five = document.getElementById("five");
var six = document.getElementById("six");
var seven = document.getElementById("seven");
var eight = document.getElementById("eight");
var nine = document.getElementById("nine");
var counter = 1;
//code that changes the box color
one.addEventListener("click", function() {
if (counter < 10 && counter % 2 === 0) {
one.style.backgroundColor = "yellow";
} else if (counter < 10 && counter % 2 != 0) {
one.style.backgroundColor = "red";
}
counter++;
console.log(counter);
});
two.addEventListener("click", function() {
if (counter < 10 && counter % 2 === 0) {
two.style.backgroundColor = "yellow";
} else if (counter < 10 && counter % 2 != 0) {
two.style.backgroundColor = "red";
}
counter++;
console.log(counter);
});
three.addEventListener("click", function() {
if (counter < 10 && counter % 2 === 0) {
three.style.backgroundColor = "yellow";
} else if (counter < 10 && counter % 2 != 0) {
three.style.backgroundColor = "red";
}
counter++;
console.log(counter);
});
four.addEventListener("click", function() {
if (counter < 10 && counter % 2 === 0) {
four.style.backgroundColor = "yellow";
} else if (counter < 10 && counter % 2 != 0) {
four.style.backgroundColor = "red";
}
counter++;
console.log(counter);
});
five.addEventListener("click", function() {
if (counter < 10 && counter % 2 === 0) {
five.style.backgroundColor = "yellow";
} else if (counter < 10 && counter % 2 != 0) {
five.style.backgroundColor = "red";
}
counter++;
console.log(counter);
});
six.addEventListener("click", function() {
if (counter < 10 && counter % 2 === 0) {
six.style.backgroundColor = "yellow";
} else if (counter < 10 && counter % 2 != 0) {
six.style.backgroundColor = "red";
}
counter++;
console.log(counter);
});
seven.addEventListener("click", function() {
if (counter < 10 && counter % 2 === 0) {
seven.style.backgroundColor = "yellow";
} else if (counter < 10 && counter % 2 != 0) {
seven.style.backgroundColor = "red";
}
counter++;
console.log(counter);
});
eight.addEventListener("click", function() {
if (counter < 10 && counter % 2 === 0) {
eight.style.backgroundColor = "yellow";
} else if (counter < 10 && counter % 2 != 0) {
eight.style.backgroundColor = "red";
}
counter++;
console.log(counter);
});
nine.addEventListener("click", function() {
if (counter < 10 && counter % 2 === 0) {
nine.style.backgroundColor = "yellow";
} else if (counter < 10 && counter % 2 != 0) {
nine.style.backgroundColor = "red";
}
counter++;
console.log(counter);
});
//logic for winning
if (one.style.backgroundColor == "red" && two.style.backgroundColor == "red" && three.style.backgroundColor == "red") {
console.log("red wins");
}.knobs {
background-color: blue;
border: none;
padding: 50px;
margin: 10px;
}
.knobs:focus {
outline: none;
}
#total {
text-align: center;
}<!DOCTYPE html>
<div id="total">
<button id="one" class="knobs"></button>
<button id="two" class="knobs"></button>
<button id="three" class="knobs"></button>
<br>
<button id="four" class="knobs"></button>
<button id="five" class="knobs"></button>
<button id="six" class="knobs"></button>
<br>
<button id="seven" class="knobs"></button>
<button id="eight" class="knobs"></button>
<button id="nine" class="knobs"></button>
</div>あなたのヘルプははるかに高く評価されます！
もう一つは：[イベント委任]（http://stackoverflow.com/q/1687296/4642212）について学びます。 9つの異なるイベントリスナーは必要ありません。引数（例えば 'e'）を持つ単一のものを'＃total'にバインドするだけで、ノブがクリックされた 'e.target'でチェックする必要があります。 – Xufox
私はあなたのバージョンと少しの最適化の代替ソリューションを追加します – Teocci