В элемент textarea вводятся нули и единицы и из них нужно сформировать квадратики

Question

Как реализовать, что бы создавались квадратики, как на картинке

const scene = document.createElement("div")
const block = document.createElement("div")
scene.classList.add("scene")
document.body.appendChild(scene)
scene.appendChild(block)

function test() {
  var o = document.getElementById("info");
  let array = [o.value]
  for (i = 0; i < array.length; ++i) {
    if (i === 0) {
      block.classList.add('block')
      block.classList.add('green')
    } else if (i === 1) {
      block.classList.add('block')
      block.classList.add('red')
    }

  }
}

.scene {
  width: 400px;
  height: 400px;
  border: 2px solid blue;
}

.block {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  float: left;
  box-sizing: border-box;
}

.green {
  background-color: green;
}

.red {
  background-color: red;
}

<textarea id="info"></textarea>
<input type="button" value="OK" id="displaySceneBtn" onclick=test()>

Answer 1

Из textarea получаем строку. Как видим, из примера, нам надо так же позаботиться о переносе строки (строку на scene мы переносим с помощью div с clear: both стилем).

Далее проходимся по каждой строке и по каждому отдельному символе (преобразовывать его в число нет смысла, т.к. строка - тот же массив из символов)

const scene = document.createElement("div");
scene.classList.add("scene");
document.body.appendChild(scene);

function test() {
  const o = document.getElementById("info");
  const array = o.value.split("\n");

  for (let i = 0; i < array.length; i++) {
    for (let j = 0; j < array[i].length; j++) {
      const block = document.createElement("div");
      block.classList.add("block");
      block.classList.add(array[i][j] === "0" ? "green" : "red");
      scene.appendChild(block);
    }

    const divide = document.createElement("div");
    divide.style.clear = "both";
    scene.appendChild(divide);
  }
}

.scene {
  width: 400px;
  height: 400px;
  border: 2px solid blue;
}

.block {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  float: left;
  box-sizing: border-box;
}

.green {background-color: green;}
.red {background-color: red;}

<textarea id="info">0101
1010</textarea>
<input type="button" value="OK" id="displaySceneBtn" onclick=test()>

Answer 2

  const scene = document.createElement("div");
  scene.classList.add("scene");
  document.body.appendChild(scene);

  function test() {
    let o = document.getElementById("info");
    let array = o.value.split('');
    
    while (scene.firstChild) scene.firstChild.remove();
    array.forEach(num => {
      let block = document.createElement("div");
      block.classList.add('block');
      
      if (Number(num)) block.classList.add('red');
      else block.classList.add('green');
      
      scene.appendChild(block);
    });
  }

.scene {
            width: 400px;
            height: 400px;
            border: 2px solid blue;
        }

        .block {
            width: 50px;
            height: 50px;
            border: 1px solid black;
            float: left;
            box-sizing: border-box;
        }

        .green {
            background-color: green;
        }

        .red {
            background-color: red;
        }

<textarea id="info"></textarea>
<input type="button" value="OK" id="displaySceneBtn" onclick=test()>

БЛОГ НА HUSL

В элемент textarea вводятся нули и единицы и из них нужно сформировать квадратики

Ответы (2 шт):