onclick函数的Javascript

我试图通过制作战舰游戏来练习我的脚本。如你所见

我目前正试图使董事会二维。我可以做一个for循环来制作电路板，但是，出于测试的目的，我只是试着制作电路板，点击一个正方形，它会变成红色。。。但是，底部的正方形总是亮起。我试图通过将

c

值设为null来调试它，但随后它就停止工作了。我知道它没有正确地保存

c

值，但我想知道如何解决这个问题

我必须自己做100个方块吗？或者我可以让脚本来做吗

maincansize=400；
document.getElementById（“主画布”）.style.height=maincansize；
document.getElementById（“主画布”）.style.width=maincansize；
document.getElementById（“主画布”）.style.position=“相对”；
var ize=maincansize*.1；
对于（var a=0；a<10；a++）{
对于（var b=0；b<10；b++）{
var c=document.createElement（“div”）；
var d=c；
c、 onclick=function（）{
myFunction（）
};
函数myFunction（）{
console.log（“单击了一个正方形…”+c.style.top）；d.style.backgroundColor=“红色”；
}
c、 style.height=ize；
c、 style.width=ize；
c、 style.left=b*ize；
c、 style.top=a*ize；
c、 style.borderColor=“绿色”；
c、 style.borderStyle=“开始”；
c、 style.position=“绝对”；
console.log（ize）；
document.getElementById（'Main-Canvas'）.appendChild（c）；
}//document.getElementById（'Main-Canvas'）.innerHTML+=“
”；
}

#主画布{
背景色：#DDDDDD；
}

---

以下是您的代码和一些修复程序：

将“px”添加到样式分配

将单击的元素传递给

myFunction

var maincansize=400；
document.getElementById（“主画布”）.style.height=maincansize；
document.getElementById（“主画布”）.style.width=maincansize；
document.getElementById（“主画布”）.style.position=“相对”；
var ize=maincansize*.1；
对于（var a=0；a<10；a++）{
对于（var b=0；b<10；b++）{
var c=document.createElement（“div”）；
c、 onclick=功能（ev）{
myFunction（ev.currentTarget）；
};
函数myFunction（el）{
log（“单击了一个正方形…”）；
el.style.backgroundColor=“红色”；
}
c、 style.height=ize+'px'；
c、 style.width=ize+'px'；
c、 style.left=（b*ize）+'px'；
c、 style.top=（a*ize）+'px'；
c、 style.borderColor=“绿色”；
c、 style.borderStyle=“开始”；
c、 style.position=“绝对”；
document.getElementById（'Main-Canvas'）.appendChild（c）；
}
}

#主画布{
背景色：#DDDDDD；
}

---

这是一个经过重大改进的解决方案。因为您使用的是板单元的容器元素的设置宽度，所以您可以浮动单元，它们将包装到下一行。绝对定位往往有点麻烦。如果您希望每行10个项目，可以通过以下方式轻松实现：

/=

使用文档片段比将每个单独的元素一次添加到实际的DOM中要快。相反，您将元素附加到文档片段中，该文档片段在附加之前不是DOM的一部分。这样，您就可以对所有单元格进行一次插入，而不是对100个单元格进行插入

我将一些样式移到了CSS，但是如果您真的需要，可以很容易地移回JS

函数onCellClick（）{ this.style.backgroundColor='red'； console.log（'selected'）； } var main=document.getElementById（'board'）， frag=document.createDocumentFragment（）， i=0， len=100； 对于（；i

#板{
宽度：500px；
高度：500px；
}
#董事会部{
浮动：左；
框大小：边框框；
宽度：50px；
高度：50px；
边框：1px实心#ccc；
}

---

当你插入代码时，在每一行前面加空格（或者选择整个代码并按

{}

符号）谢谢你，试过了。你想做的是得到实际触发点击的元素-只是在过去的10分钟里玩了那个战舰游戏！能否将myFunction（）从for循环中取出，并将元素作为输入参数添加到其中，然后重试？