Почему не отображается массив в html?

Рейтинг: 0Ответов: 1Опубликовано: 19.02.2023

Я написал скрипт который выводит массив с массивами в html, и он работает.

Но почему-то блоки которые он создаёт не видно на самой странице, в панели разработчика видно что ширина каждого блока 359px и высота 0px, хотя в css написано другое.

let arrayZone = document.querySelector(".arrayZone")

let array = [
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
]
for (let x = 0; x < array.length; x++) {
  for (let y = 0; y < array[x].length; y++) {
    if (array[x][y] === 1) {
      array[x][y] = document.createElement("div");
      array[x][y].classList.add("brick");
    }
    if (array[x][y] === 0) {
      array[x][y] = document.createElement("div");
      array[x][y].classList.add("brick2");
    }
    arrayZone.appendChild(array[x][y]);
  }
}
.arrayZone {
  display: flex;
  min-width: 100vh;
  min-height: 100vh;
}

.brick {
  min-height: 40px;
  max-width: 30px;
  background-color: black;
}

.brick2 {}
<body>
  <div class="arrayZone">

  </div>
  <script src="index.js"></script>
</body>

css javascript
Источник: Stack Overflow на русском

Ответы

▲ 0

Но почему-то блоки которые он создаёт не видно на самой странице

Это из-за твоего css. Если закомментировать и дописать размеры явно - блоки видно. Вот почитай статейку https://habr.com/ru/post/329820/

Так же уменьшил твой вариант программы

let arrayZone = document.querySelector(".arrayZone")

let array = [
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
]
for (let x = 0; x < array.length; x++) {
  for (let y = 0; y < array[x].length; y++) {
    const o = document.createElement("div");
    const c = array[x][y] === 1 ? "brick" : "brick2"
    o.classList.add(c)
    
    arrayZone.appendChild(o);
  }
}
.arrayZone {
  display: flex;
  min-width: 100vh;
  min-height: 100vh;
}

.brick {
  /*
  min-height: 40px;
  min-width: 30px;
  */
  height: 40px;
  width: 30px;
  background-color: black;
}

.brick2 {}
<body>
  <div class="arrayZone">

  </div>
  <script src="index.js"></script>
</body>