CODEWITHSUNDEEP
javascriptfunctiondomdom-manipulation
Xena
Xena

Reputation: 377

How to create number of div elements got from input field

I need to create name generator. I have an input field, I need user to enter number > 0 and create such number of divs in document.

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">

console does not show any issues !

Upvotes: 0

Views: 737

Answers (3)

user11114632
user11114632

Reputation:

  1. Like @esqew mentioned, the main issue is that you are defining 'nums' when the javascript starts up (before any user input as made). You should read the value of nums at the start of assign().

  2. As well, you should reference your input by ID rather than class since there is no additional styling.

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">

Upvotes: 0

Michael Gitart
Michael Gitart

Reputation: 33

Here example

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" />

Upvotes: 0

esqew
esqew

Reputation: 44701

By including your let statement outside your function, you're setting nums immediately once the script loads. In this time, it's impossible for the field you're attempting to extract the int from to have a value, as the user hasn't had enough time to make their input yet.

Move your let statement into your function so it will gather the value of your input box when the function runs (and the field is ostensibly completed by the user.)

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">

Upvotes: 2

Related Questions