我正在打井字游戏。我想向每个div添加单独的onclick事件，以便可以根据我单击的div添加“ X”或“ O”。稍后将添加“ O”。
JavaScript：
function createDivs() {
for (i = 0; i < 9; i++) {
var d = document.createElement("DIV");
document.body.appendChild(d);
//Stuck here -borrowed some of this from a similar topic-
d.onclick = function() {
return function() {
var p = document.createElement("P");
var x = document.createTextNode("X");
p.appendChild(x);
d.appendChild(p);
}
}(i);
//-------------------------------------------------
var ii = document.createAttribute("id");
ii.value = "D" + i;
d.setAttributeNode(ii);
var z = "D" + i;
if (i == 3 || i == 6) {
document.getElementById(z).style.clear = "left";
}
}
}
的HTML： <body onload="createDivs()">
d作为参数传递并接受作为参数，以便闭包click将在执行处理程序函数时记住它。
d没什么，但element你正在创建（var d = document.createElement("DIV");）
function createDivs() {
for (i = 0; i < 9; i++) {
var d = document.createElement("DIV");
d.style.float = 'left';
document.body.appendChild(d);
d.onclick = function(d) {
//----------------^^^ Accept d here
return function() {
var p = document.createElement("P");
var x = document.createTextNode("X");
p.appendChild(x);
d.appendChild(p);
d.onclick = function() {}; //Unset function after click event
}
}(d);
//^^ Pass d here
var ii = document.createAttribute("id");
ii.value = "D" + i;
d.setAttributeNode(ii);
var z = "D" + i;
if (i == 3 || i == 6) {
document.getElementById(z).style.clear = "left";
}
}
}div {
width: 30px;
height: 30px;
border: 1px solid black;
}<body onload="createDivs()">更新：作为建议的Barmar在评论中值this的event-handler函数将在其事件注册的元素。
function createDivs() {
for (i = 0; i < 9; i++) {
var d = document.createElement("DIV");
d.style.float = 'left';
document.body.appendChild(d);
d.onclick = function() {
var p = document.createElement("P");
var x = document.createTextNode("X");
p.appendChild(x);
this.appendChild(p);
this.onclick = function() {}; //Unset function after click event
};
var ii = document.createAttribute("id");
ii.value = "D" + i;
d.setAttributeNode(ii);
var z = "D" + i;
if (i == 3 || i == 6) {
document.getElementById(z).style.clear = "left";
}
}
}div {
width: 30px;
height: 30px;
border: 1px solid black;
}<body onload="createDivs()">本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句