Несколько блоков в зависимости от значения input

Question

Как сделать, чтобы в зависимости от числа, вписанного в input, было разное количество блоков под этим инпутом?

<input type="text"> <!--вот сюда вбиваю число-->
<div id="block">
<!-- тут просто некий контент блока -->
</div>

Answer 1

const input = document.querySelector('.input');

function getElemWithClass(tag, ...className) {
  const node = document.createElement(tag);
  className.forEach((_className) => {
    node.classList.add(_className);
  });
  return node;
}

function createContent() {
  let content = document.querySelector('.content'); // находим элемент с классом .content
  if (content !== null) { // если мы его нашли, то удаляем
    content.remove();
  }
  content = getElemWithClass('div', 'content'); // создаём div с классом .content
  document.body.append(content); // вставляем .content в body
  return content;
}

function createBlocks(quantity) {
  const content = createContent();
  for (let i = 1; i <= quantity; i++) { // в цикле от 1 до value, которое ввели
    const block = getElemWithClass('div', 'block'); // создаём новый div с классом .block
    block.innerHTML = i; // содержимое этого .block равно i
    content.append(block); // вставляем этот .block в .content
  }

}

input.addEventListener('input', (e) => {
  const value = e.target.value; // введённое значение в input
  if (value > 999) return false; // если введенное значение > 999, то завершить функцию обработчика
  createBlocks(value);
});

.block {
  display: inline-block;
  border: 1px solid orange;
  padding: 10px;
}

.input {
  margin-bottom: 10px;
}

<input class="input" type="number">

Answer 2

function Input() {
  count = parseInt(document.forms.Form.input.value);
  block = new Array();
  for (i = 0; i < count; i++)
    block.push('<div class="block"></div>');
  document.getElementById('block').innerHTML = block.join('');
}

.block {display: inline-block; margin: 5px 5px 0 0; width: 15px; height: 15px; border: dashed 1px red;}

<form name="Form">
  <input name="input" type="text" onkeyup="Input()" autocomplete="off" />
</form>
<div id="block">Элементов нет</div>

update

.block {display: inline-block; margin: 5px 5px 0 0; width: 15px; height: 15px; border: dashed 1px red;}

<form name="Form">
  <input name="input" type="text" onkeyup="Input()" autocomplete="off" />
</form>
<div id="block">Элементов нет</div>

<script>
function Input() {
  count = parseInt(document.forms.Form.input.value);
  block = new Array();
  for (i = 0; i < count; i++)
    block.push('<div class="block"></div>');
  document.getElementById('block').innerHTML = block.join('');
}
</script>

Answer 3

const gen = e => content.innerHTML = Array(1 + +e.target.value).join('<div></div>')

div:not(#content) {display: inline-block; margin: 5px 5px 0 0; width: 15px; height: 15px; background-color: tomato;}

<input name="input" type="number" min="0" onchange="gen(event)" />
<div id="content"></div>

БЛОГ НА HUSL

Несколько блоков в зависимости от значения input

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