Question 225990 in Javascript Question posted in
A very good W3school tutorial can be found here.

When a user inputs a value, how can I create multiple elements at same time using JavaScript?

I’m planning to auto generate multiple user input boxes.

Example:

If user will input 10, auto generate 3 input field at each time. so user gets 30 input fields.

I’m finding this solution all day long but it still doesn’t work for me.
Before I looped this code it worked.
After I looped it it’s no longer working.

This is what I got before looping. CSS was pre-linked that’s why it’s aligned at one line.

This is what i got before looping , yeap css was pre-linked that's why align at one line 

// Get the input value only once
const inputValue = document.querySelector(".inputBox").value;

// Define the function outside of the loop
function btnClick(){
   
  /// Loop until the input value is reached
  let i = 0;
  while (i < inputValue) {
    // Create a new div element
    const divElement = document.createElement("div");
    const sp2 = document.querySelector(".page");
    const parentdiv = sp2.parentNode;
    parentdiv.insertBefore(divElement, sp2.nextSibling);

    //Adding class to new div element
    document.querySelectorAll("div")[2].classList.add("calBox");
    
    const length = "<p class='first'> Length : <input type='text' class='second' value='' /> </p>";
    const height = "<p class='first'> Height : <input type='text' class='second' value='' /> </p>";
    const width =  "<p class='first'> Width : <input type='text' class='second' value='' /> </p>";
    const first = document.querySelector(".calBox");
    const second = length + height + width +"<br />";

    first.innerHTML = second ;
    i++;
   
  }
}
Tags:

2

Answers


  1. 0 
        // Get the input value only once
const inputValue = parseInt(document.querySelector(".inputBox").value); // Convert to integer

// Define the function outside of the loop
function btnClick() {
  const sp2 = document.querySelector(".page");
  const parentdiv = sp2.parentNode;

  // Loop until the input value is reached
  for (let i = 0; i < inputValue; i++) {
    // Create a new div element
    const divElement = document.createElement("div");
    parentdiv.insertBefore(divElement, sp2.nextSibling);

    // Adding class to new div element
    divElement.classList.add("calBox");

    // Create the input fields HTML
    const inputsHTML = `
      <p class='first'> Length : <input type='text' class='second' value='' /> </p>
      <p class='first'> Height : <input type='text' class='second' value='' /> </p>
      <p class='first'> Width : <input type='text' class='second' value='' /> </p>
      <br />
    `;

    // Set the HTML of the new div
    divElement.innerHTML = inputsHTML;
  }
}

    Remember that your code assumes that you have an HTML element with the class inputBox for obtaining the user input and an HTML element with the class page for inserting the generated div elements. Make sure your HTML structure aligns with these assumptions.

    Login or Signup to reply.
  2. 0

    This is a use case for the document fragment interface.

    let button = document.querySelector("button");
button.addEventListener("click",function(e){
  let quantity = parseInt(document.querySelector("#qty").value);
  if(quantity >= 0) {
    let fragment = new DocumentFragment();
    while( quantity-- ) {
      let input = document.createElement("input");
      fragment.append(input);
    }
    document.body.append(fragment);
  }
  
});
    <input type-text id=qty><button>enter
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search