我做了一个变量,它是一个函数。该函数正在创建一个Element,应用样式并返回该函数内的变量。
我后来有一个for循环,它有一个“ if”,想要通过使用“ appendChild”将该元素添加到一个已经存在的div中,但是我无法使其工作。
有什么建议吗?
var wall = function () {
var tmp_wall = document.createElement('div');
document.getElementById("g_world").appendChild(tmp_wall);
}
var ground = function () {
var tmp_ground = document.createElement('div');
document.getElementById("g_world").appendChild(tmp_ground);
}
// *****************************************************************
var world = [
[1,1],
[2,2],
];
function drawWorld () {
for(var y = 0; y < world.length; y++) {
for(var x = 0; x < world[y]; x++) {
if(world[y][x] === 1) {
wall();
}
else if (world[y][x] === 2) {
ground();
}
}
document.getElementById('g_world').innerHTML += '<br>';
}
}
答案 0 :(得分:0)
这看起来有点奇怪:
document.getElementById('g_world') += document.body.appendChild(ground);
appendChild
的工作方式如下:
document.getElementById('g_world').appendChild(ground());
您可以尝试检查是否可行吗?
此外,您的脚本在return语句后将不会继续。也许您的示例代码中缺少一些分号?
编辑:
您的问题出在第二个for循环中。您忘了添加.length
,就像这样:
for(var x = 0; x < world[y].length; x++) {
答案 1 :(得分:0)
我注意到您的代码中有几处其他内容,这可能有帮助也没有帮助。
第一点是您返回return tmp_wall
,这使您的代码在该点之后无法运行。
第二点是您的代码内有一个闭包,应调用它以正确使用它。
第三点是您不尝试附加已创建的tmp_wal元素。
您不能多次向dom中添加相同的元素,而要解决此问题,将使用cloneNode()或为for()上的每次迭代创建新的元素。
闭包drawWorld
也缺少一些关闭标签。
我只使用JS会有所不同,但是,我决定尽可能少地更改,以便为您提供所需的网格。
我将执行以下操作:
var wall = function() {
// var tmp_wall = document.createElement("div");
// tmp_wall.style.width = 50 + "px";
// tmp_wall.style.height = 50 + "px";
// tmp_wall.style.backgroundColor = "green";
// tmp_wall.className = "wall";
var world = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1],
[1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1],
[1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1],
[1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1],
[1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1],
[1, 2, 2, 2, 2, 2, 5, 2, 2, 2, 2, 2, 1],
[1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1],
[1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1],
[1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1],
[1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1],
[1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1],
[1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1]
];
const gWorldElement = document.getElementById("g_world");
function drawWorldContainer() {
for (let i = 0; i < world.length; i++) {
const newElementI = document.createElement("div");
gWorldElement.appendChild(newElementI);
for (let j = 0; j < world[i].length; j++) {
const newElementJ = document.createElement("div");
gWorldElement.children[i].appendChild(newElementJ);
newElementJ.innerText = world[i][j];
}
}
}
drawWorldContainer();
};
wall();
如果将g_world
元素设置为flex ,结果将具有网格布局,其中div容器和其他包含该值的divs。
然后,您可以创建另一个检查,例如if(world[i][j] === 1)
,检查该值并相应地添加className或更改元素的样式标签。
我希望我不会对您的代码进行太多更改,并且您仍然能够制定出解决方案,如果您有任何疑问,请告诉我。