带有一些布尔值的JavaScript if语句只在第一次使用时有效

我有这两个函数，第一个（move_c（I））在用户单击（源）图像时运行，第二个（move_to_c1（I））在用户单击（目标）div时运行

还有一个布尔值（cp），每次运行第二个函数时，它都会在true和false之间切换

图像是红色或黄色的，想法是红色只会在cp==true时移动，黄色只会在cp==false时移动，但它只在第一次工作时才起作用，之后它就不能工作了，我不明白为什么

红色必须先走。第一步，如果条件有效，则为红色和true。黄色&&true不会在第一次移动时移动（这是正确的）。但对于后续移动，如果条件不起作用

哦。。。我只在圆形游戏中实现了这一点，而不是方形游戏

var cp = true;
function move_c(i) {
  alert(document.getElementById(i).className + " " + cp);
  this.image_c = i;
  if (((document.getElementById(i).className == 'red') && (cp == true)) || ((document.getElementById(i).className == 'yellow') && (cp == false))) {
    c1.setAttribute('onclick', 'move_to_c1(image_c)');
    c2.setAttribute('onclick', 'move_to_c2(image_c)');
    c3.setAttribute('onclick', 'move_to_c3(image_c)');
    c4.setAttribute('onclick', 'move_to_c4(image_c)');
    c5.setAttribute('onclick', 'move_to_c5(image_c)');
    c6.setAttribute('onclick', 'move_to_c6(image_c)');
    c7.setAttribute('onclick', 'move_to_c7(image_c)');
    c8.setAttribute('onclick', 'move_to_c8(image_c)');
    c9.setAttribute('onclick', 'move_to_c9(image_c)');
  }
}

function move_to_c1(i) {
  if (document.getElementById(i).name == 'c' || document.getElementById(i).name == 'c2' || document.getElementById(i).name == 'c4' || document.getElementById(i).name == 'c5') {
    document.getElementById("c1").appendChild(document.getElementById(i));
    document.getElementById(i).style.zIndex = 1;
    document.getElementById(i).setAttribute('name', 'c1');
    cp = !cp;
  }
}

---

我建议您在Chrome中打开页面，并使用开发者工具。按键盘上的F12键可以打开控制台

控制台将向您显示，在移动第一个笑脸之后，正在从

move\u c

中的

c3.setAttribute

行抛出异常。这似乎是因为移动笑脸时，名称

c3

被更改为引用多个元素。当它引用多个元素而不是预期的单个元素时，

setAttribute

在组中不可用

修复方法是避免调用

c3.setAttribute（'onclick'，'move_to_c3（image_c）'）和类似代码。最直接的方法是在每个
setAttribute
之前检查：

if (c1) {
    c1.setAttribute(.....);
}


您可以更改代码以避免为多个对象指定相同的名称。您可以将游戏状态保存在单独的对象中，而不是设置名称属性。添加
var gamestate=[]
位于顶部的某个位置，然后替换
document.getElementById（i）.setAttribute（'name'，'c1'）带有
游戏状态[i]=“c1”。然后，您可以通过访问
gamestate[i]
来查找图像的位置。您可以随时使用
console.log（gamestate）记录完整的游戏状态

请注意，打开控制台后，可以使用
console.log
而不是
alert
查看发生了什么。这比一直确认警报对话框要舒服得多。它还允许您更详细地检查对象的内部，如果您尝试
console.log（gamestate），您将看到这一点

一旦你有了工作，然后开始研究数组和循环。通过删除所有重复，它将有助于简化代码。
我建议您使用Chrome打开页面，并使用开发人员工具。按键盘上的F12键可以打开控制台

控制台将向您显示，在移动第一个笑脸之后，正在从
move\u c
中的
c3.setAttribute
行抛出异常。这似乎是因为移动笑脸时，名称
c3
被更改为引用多个元素。当它引用多个元素而不是预期的单个元素时，
setAttribute
在组中不可用

修复方法是避免调用
c3.setAttribute（'onclick'，'move_to_c3（image_c）'）和类似代码。最直接的方法是在每个
setAttribute
之前检查：

if (c1) {
    c1.setAttribute(.....);
}


您可以更改代码以避免为多个对象指定相同的名称。您可以将游戏状态保存在单独的对象中，而不是设置名称属性。添加
var gamestate=[]
位于顶部的某个位置，然后替换
document.getElementById（i）.setAttribute（'name'，'c1'）带有
游戏状态[i]=“c1”。然后，您可以通过访问
gamestate[i]
来查找图像的位置。您可以随时使用
console.log（gamestate）记录完整的游戏状态

请注意，打开控制台后，可以使用
console.log
而不是
alert
查看发生了什么。这比一直确认警报对话框要舒服得多。它还允许您更详细地检查对象的内部，如果您尝试
console.log（gamestate），您将看到这一点

一旦你有了工作，然后开始研究数组和循环。通过删除所有重复，它将有助于简化代码。
是否
cp
始终是布尔值？那么你就不需要检查布尔值了。我喜欢叛逆的布尔值。“不，我不想是真的！”另外，当你可以添加事件监听器时，为什么你要设置
onclick
属性？cp总是一个布尔值，git hub刚刚更新，所以你现在可以检查它，不确定事件监听器，不知道它们之后它就不能完成它的工作了，你能解释一下吗？我试用了你的应用程序，它似乎很管用。
cp
总是布尔值吗？那么你就不需要检查布尔值了。我喜欢叛逆的布尔值。“不，我不想是真的！”另外，当你可以添加事件监听器时，为什么你要设置
onclick
属性？cp总是一个布尔值，git hub刚刚更新，所以你现在可以检查它，不确定事件监听器，不知道它们之后它就不能完成它的工作了，你能解释一下吗？我试过你的应用程序，它似乎很有效。此外，一旦c[1-9]/“onclick”属性第一次被设置，之后就不会被取消设置。这就是为什么他的逻辑只有第一次起作用。实际上，有条件的
如果（cp&&red | | |！cp&&yellow）
应该发生在“move_to_cX”@Joel Yes，可能会有更多问题。我只考虑了最直接的问题，我的目的更多的是介绍开发人员工具。教人