Как написать скрипт создания и очистки коллекции элементов.

[misinkevych.alina]

 Пользователь вводит количество элементов в input и нажимает кнопку Создать, после чего рендерится коллекция. При нажатии на кнопку Очистить, коллекция элементов очищается.

Создай функцию createBoxes(amount), которая принимает 1 параметр amount - число. Функция создает столько div, сколько указано в amount и добавляет их в div#boxes.

Каждый созданный div:

• Имеет случайный rgb цвет фона
• Размеры самого первого div - 30px на 30px
• Каждый следующий div после первого, должен быть шире и выше предыдущего на 10px

Создай функцию destroyBoxes(), которая очищает div#boxes.

<div id="controls">
  <input type="number" min="0" max="100" step="1" />
  <button type="button" data-action="render">Создать</button>
  <button type="button" data-action="destroy">Очистить</button>
</div>

<div id="boxes"></div>

 

[AlexZaw]

var render = document.querySelector('[data-action="render"]');
var destroy = document.querySelector('[data-action="destroy"]');
var boxes = document.getElementById("boxes");
render.addEventListener("click", getAmount);
destroy.addEventListener("click", destroyBoxes);

function getAmount() {
  var amount = +document.querySelector("#controls input").value;
  createBoxes(amount);
}

function createBoxes(amount) {
  var basicSize = 30;
  var fragment = document.createDocumentFragment();
  for (var i = 0; i < amount; i++) {
    var size = basicSize + i * 10;
    var div = document.createElement("div");
    div.style.cssText = `width: ${size}px; height: ${size}px; background-color: rgba( ${random()} , ${random()} , ${random()} )`;
    fragment.appendChild(div);
  }
  boxes.appendChild(fragment);
}

function destroyBoxes() {
  boxes.innerHTML = "";
}

function random() {
  return Math.floor(Math.random() * 256);
}

 

[misinkevych.alina]

21.09.2019 в 15:16, AlexZaw сказал:

var render = document.querySelector('[data-action="render"]');
var destroy = document.querySelector('[data-action="destroy"]');
var boxes = document.getElementById("boxes");
render.addEventListener("click", getAmount);
destroy.addEventListener("click", destroyBoxes);

function getAmount() {
  var amount = +document.querySelector("#controls input").value;
  createBoxes(amount);
}

function createBoxes(amount) {
  var basicSize = 30;
  var fragment = document.createDocumentFragment();
  for (var i = 0; i < amount; i++) {
    var size = basicSize + i * 10;
    var div = document.createElement("div");
    div.style.cssText = `width: ${size}px; height: ${size}px; background-color: rgba( ${random()} , ${random()} , ${random()} )`;
    fragment.appendChild(div);
  }
  boxes.appendChild(fragment);
}

function destroyBoxes() {
  boxes.innerHTML = "";
}

function random() {
  return Math.floor(Math.random() * 256);
}

 

Решение хорошее но почему вы используете var вместо const или let?

 

[AlexZaw]

1 час назад, misinkevych.alina сказал:

Решение хорошее но почему вы используете var вместо const или let?

Просто привык к ES5 🙂 Можно без проблем все var заменить на let, ну а const, на мой взгляд, здесь вообще негде использовать.

[mellsson89]

Добрый день) А как без  for  решить?)

[lafuma4me]

Не выполняется это условие -\Функция создает столько div, сколько указано в amount и добавляет их в div#boxes и  Каждый следующий div после первого, должен быть шире и выше предыдущего на 10px. \ у вас первые 2 boxes выдает разных размеров, а следующие повторяются N-раз. 

 

[lafuma4me]

может создать пустой массив, пройтись map

 

Edited March 7, 2021 by lafuma4me