Question

我做了一个变量，它是一个函数。该函数正在创建一个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>';
    }
}

Answer 1

这看起来有点奇怪：

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++) {

Answer 2

我注意到您的代码中有几处其他内容，这可能有帮助也没有帮助。

第一点是您返回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或更改元素的样式标签。

我希望我不会对您的代码进行太多更改，并且您仍然能够制定出解决方案，如果您有任何疑问，请告诉我。

有没有一种创建元素并将其发送到“ appendChild”另一个函数的方法？

2 个答案: