Javascript 尝试在单击时重复一个函数

我想为两个玩家做一个井字游戏。游戏旁边有一个小窗口，在

P1

和

P2

旁边有灯光。

p1灯

开始为绿色，

p2灯

开始为红色。当您单击任何方块时，它会翻转颜色，使

p1灯

为红色，

p2灯

为绿色。当你点击另一个方块后，它应该再次切换，但它没有。这是我的函数代码。我试过while循环，for循环，但似乎不起作用

var x; // just so I can refer to the function as true or false

function switcher(){
    if (p1Light.style.backgroundColor = "#5fd81e"){
        p2Light.style.backgroundColor = "#5fd81e";
        p1Light.style.backgroundColor = "#ce2e1c";
        x = true;
    }else {
        x = false;
    };
};

function switcher2(){
    if (p2Light.style.backgroundColor = "#5fd81e"){
        p2Light.style.backgroundColor = "#ce2e1c";
        p1Light.style.backgroundColor = "#5fd81e";
        x = false;
    } else {
        x = true;
    };
};

---

您在

if

条件中意外地指定了

p1Light.style.backgroundColor

和

p2Light.style.backgroundColor

。这将产生意外的结果（语句将始终为

true

）

switcher（）中的输入错误

：

应该是：

if(p1Light.style.backgroundColor === "#5fd81e")

if (p2Light.style.backgroundColor === "#5fd81e"){

switcher2（）中的输入错误

：

应该是：

if(p1Light.style.backgroundColor === "#5fd81e")

if (p2Light.style.backgroundColor === "#5fd81e"){

---

希望这有帮助，

您在

if

条件中意外地指定了

p1Light.style.backgroundColor

和

p2Light.style.backgroundColor

。这将产生意外的结果（语句将始终为

true

）

switcher（）中的输入错误

：

应该是：

if(p1Light.style.backgroundColor === "#5fd81e")

if (p2Light.style.backgroundColor === "#5fd81e"){

switcher2（）中的输入错误

：

应该是：

if(p1Light.style.backgroundColor === "#5fd81e")

if (p2Light.style.backgroundColor === "#5fd81e"){

---

希望这有帮助，

这不仅仅解决了问题。我对它进行了优化，这样您就可以只使用一个函数

switcher（）

为每个玩家的回合切换颜色。我也知道你的x是当前玩家的回合。如果我弄错了，请随时调整或通知我修复它

const styleGreen=“#5fd81e”
const styleRed=“#ce2e1c”
让playerTurn=1//从播放器1开始
切换器=（）=>{
//轮到玩家1
如果（播放机返回%2==1）{
p1Light.style.backgroundColor=样式绿色
p2Light.style.backgroundColor=styleRed
}
//轮到玩家2
否则{
p2Light.style.backgroundColor=样式绿色
p1Light.style.backgroundColor=styleRed
}
playerTurn++
}

1
2.
开关转动

这不仅解决了问题。我对它进行了优化，这样您就可以只使用一个函数

switcher（）

为每个玩家的回合切换颜色。我也知道你的x是当前玩家的回合。如果我弄错了，请随时调整或通知我修复它

const styleGreen=“#5fd81e”
const styleRed=“#ce2e1c”
让playerTurn=1//从播放器1开始
切换器=（）=>{
//轮到玩家1
如果（播放机返回%2==1）{
p1Light.style.backgroundColor=样式绿色
p2Light.style.backgroundColor=styleRed
}
//轮到玩家2
否则{
p2Light.style.backgroundColor=样式绿色
p1Light.style.backgroundColor=styleRed
}
playerTurn++
}

1
2.
切换至
样式。backgroundColor
仅在您直接定义属性时才能获取颜色。它还将返回
rgb
颜色代码！所以需要使用getComputedStyle并比较颜色，您需要创建额外的元素来临时设置比较颜色

var x; // just so I can refer to the function as true or false

function tempColor(color) {
  var ele = document.createElment("span");
  ele.setAttribute("id","temp_color");
  ele.style.display = "none";
  ele.style.color = color;
  document.body.appendChild(ele);
  return document.defaultView.getComputedStyle(temp_color).color;
}

function switcher(){
    var p1Color = document.defaultView.getComputedStyle(p1Light).backgroundColor;
    var compareColor = tempColor("#5fd81e");
    if (p1Color == compareColor){
        p2Light.style.backgroundColor = "#5fd81e";
        p1Light.style.backgroundColor = "#ce2e1c";
        x = true;
    }else {
        x = false;
    };
    temp_color.remove(); //remove temp element 
};

function switcher2(){
    var p2Color = document.defaultView.getComputedStyle(p2Light).backgroundColor;
    var compareColor = tempColor("#5fd81e");
    if (p2Color == compareColor){
        p2Light.style.backgroundColor = "#ce2e1c";
        p1Light.style.backgroundColor = "#5fd81e";
        x = false;
    } else {
        x = true;
    };
    temp_color.remove(); //remove temp element 
};

style.backgroundColor
仅当您直接定义属性时才能获取颜色。它还将返回
rgb
颜色代码！所以需要使用getComputedStyle并比较颜色，您需要创建额外的元素来临时设置比较颜色

var x; // just so I can refer to the function as true or false

function tempColor(color) {
  var ele = document.createElment("span");
  ele.setAttribute("id","temp_color");
  ele.style.display = "none";
  ele.style.color = color;
  document.body.appendChild(ele);
  return document.defaultView.getComputedStyle(temp_color).color;
}

function switcher(){
    var p1Color = document.defaultView.getComputedStyle(p1Light).backgroundColor;
    var compareColor = tempColor("#5fd81e");
    if (p1Color == compareColor){
        p2Light.style.backgroundColor = "#5fd81e";
        p1Light.style.backgroundColor = "#ce2e1c";
        x = true;
    }else {
        x = false;
    };
    temp_color.remove(); //remove temp element 
};

function switcher2(){
    var p2Color = document.defaultView.getComputedStyle(p2Light).backgroundColor;
    var compareColor = tempColor("#5fd81e");
    if (p2Color == compareColor){
        p2Light.style.backgroundColor = "#ce2e1c";
        p1Light.style.backgroundColor = "#5fd81e";
        x = false;
    } else {
        x = true;
    };
    temp_color.remove(); //remove temp element 
};

对于条件句，应该使用双等于，因为它不起作用，
==
=
也不起作用，
==
理想情况下，实际上应该使用三等于，由于
=
将进行类型转换，在某些情况下可能会产生意外的结果。您应该对条件使用双等于
==
=
不起作用，而且
==
也不起作用，理想情况下，您应该实际使用三等于，因为
==
将执行类型转换，在某些情况下可能会产生意外的结果。