Как создать количество элементов div, полученных из поля ввода - PullRequest
Новая
       76

Как создать количество элементов div, полученных из поля ввода

1 голос
/ 04 мая 2020

Мне нужно создать генератор имен. У меня есть поле ввода, мне нужно, чтобы пользователь ввел число> 0 и создал такое количество элементов в документе. 

let nums = parseInt(document.querySelector('.num').value);

function assign() {
  for (i = 0; i < nums; i++) {
    let box = document.createElement('div');
    box.classList.add('boxList');
    box.innerHTML = `<div>Group ${nums[i]}</div>`;
    document.body.appendChild(box);
  }
}
.boxList {
  border: 1px solid red;
  padding: 10px;
}
<input type="number" class="num" placeholder="enter num of groups">
<input type="button" id="assign" onclick="assign()" value="Assign">

Консоль не показывает никаких проблем!

Ответы [ 3 ]

2 голосов
/ 04 мая 2020

Включая ваш оператор let вне вашей функции, вы устанавливаете nums сразу после загрузки скрипта. В настоящее время невозможно, чтобы поле, из которого вы пытаетесь извлечь значение int, имело значение, поскольку у пользователя еще не было достаточно времени для ввода данных.

Переместите let оператор в вашу функцию, чтобы он собирал значение вашего поля ввода при запуске функции (и поле якобы заполняется пользователем). 

function assign() {
  let nums = parseInt(document.querySelector('.num').value);
  for (i = 0; i < nums; i++) {
    let box = document.createElement('div');
    box.classList.add('boxList');
    box.innerHTML = `<div>Group ${nums[i]}</div>`;
    document.body.appendChild(box);
  }
}
.boxList {
  border: 1px solid red;
  padding: 10px;
}
<input type="number" class="num" placeholder="enter num of groups">
<input type="button" id="assign" onclick="assign()" value="Assign">
0 голосов
/ 04 мая 2020

  1. Как упомянуто @esqew, основная проблема заключается в том, что вы определяете 'nums', когда запускается javascript (перед любым пользовательским вводом, как сделан). Вы должны прочитать значение nums в начале assign ().

  2. Кроме того, вы должны ссылаться на ваш ввод по идентификатору, а не по классу, поскольку нет дополнительных стилей. 

let nums = 0;

function assign() {
  nums = parseInt(document.querySelector('#numInput').value)
  for (i = 0; i < nums; i++) {
    let box = document.createElement('div');
    box.className = 'boxList'
    box.innerHTML = `<div>Group ${i}</div>`;
    document.body.appendChild(box);
  }
}
.boxList {
  border: 1px solid red;
  padding: 10px;
}
<input type="number" id="numInput" placeholder="enter num of groups">
<input type="button" id="assign" onclick="assign()" value="Assign">
0 голосов
/ 04 мая 2020

Вот пример 

let btn = document.querySelector("#assign");

btn.addEventListener("click", assign);

function assign() {
  let nums = parseInt(document.querySelector(".num").value, 10);

  for (let i = 0; i < nums; i++) {
    let box = document.createElement("div");
    box.classList.add("boxList");
    box.innerHTML = `<div>Group ${i}</div>`;
    document.body.appendChild(box);
  }
}
.boxList {
  border: 1px solid red;
  padding: 10px;
}
    <input type="number" class="num" placeholder="enter num of groups" />
    <input type="button" id="assign" value="Assign" />
...