Есть ли способ создать элемент и отправить его в другую функцию "appendChild"? - PullRequest
Новая
       84

Есть ли способ создать элемент и отправить его в другую функцию "appendChild"?

0 голосов
/ 24 мая 2019

Я сделал переменную, которая является функцией.Эта функция создает элемент, применяет стиль и возвращает переменную внутри функции.

Позже у меня есть цикл for, в котором есть "if", которое хочет добавить этот элемент в уже существующий div с помощью "appendChild ", но мне не удается заставить его работать.

Есть предложения? 

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>';
    }
}

Ответы [ 2 ]

0 голосов
/ 25 мая 2019

Я заметил несколько вещей в вашем коде, и это может или не быть полезным.

Во-первых, вы возвращаете 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 и другими элементами div, содержащими значение.

Затем вы можете создать еще одну проверку, такую ​​как if(world[i][j] === 1), которая проверяет значение и соответственно добавить classNames или изменить тег стиля элемента.

Надеюсь, я не сильно изменил ваш код, и вы все равно сможете разработать свое решение, если у вас есть какие-либо вопросы, пожалуйста, дайте мне знать.

0 голосов
/ 24 мая 2019

Это выглядит немного странно: 

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