CODEWITHSUNDEEP
javascriptjqueryhtml
Anders Lund
Anders Lund

Reputation: 53

How to add number of div's in DOM based on user input

I created a simple form, where user can only type in numbers. And when they do, a number of div's(boxes) should show in the browser, based on the number the user types in to the input field.

It's all done in CodePen.

This is my HTML.

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:700" 
  rel="stylesheet">
</head>

<body>

   <!--_-_-_-_INPUT_FIELD_-_-_-_-->
   <div class="input-container">
    <form id="inputForm">
     <input type="number" id="input-box" name="quantity" min="1" max="">
     <input id="filldetails" name="submit" type="submit" value="Add 
       boxes">
    </form>
   </div>

  <!--_-_-_-_BOX-Container_-_-_-_-->
  <div class="boxes-container">
    <div id="boxes"></div>
  </div>

</body>

THIS IS MY JS

const form = document.getElementById('inputForm');
const input = inputForm.querySelector('input');

form.addEventListener('submit', (e) => {
  const boxInput = input.value;
  console.log(input.value);
});

I get the submit form to respond to the console, so I know its working.

My question(s) are:

How do I get the user input to create a as many divs in the DOM as the user wants to?

Do I use a for loop to iterate through the div as many times as the user has put in, in the input field? If so, what is best practice?

I would also like when the user opens the page, that there are zero div's visible and when the add a number, the div's show, if that makes any sense?

Thanks :)

Upvotes: 2

Views: 2206

Answers (3)

Panomosh
Panomosh

Reputation: 892

I would have a look a jQuery's .clone() method.

create class called .hide and have it set to .hide { display: none; }

Add this to the Square element you have in the HTML already.

What you will do then is clone this square x amount of times, and remove the .hide class for each one.

This can be done like so:

HTML:

<form class="boxForm">
    <input type="number" class="boxInput"/>
    <input type="submit" value="Submit"/>
</form>
<div class="boxContainer">
    <div class="box hide"></div>
</div>

CSS:

.box {
    height: 100px;
    width: 100px;
    background-color: red;
}
.hide {
    display: none;
}

JS:

$(function(){

    $('.boxForm').submit(function(e){
        e.preventDefault();
        var amount = $('.boxInput').val();
        for(i=0; i<amount; i++){
            var newBox = $('.hide').clone();
            newBox.removeClass('hide');
            newBox.appendTo('.boxContainer');
        }
    });

});

JSFIDDLE Link working with same code as above:

https://jsfiddle.net/Panomosh/3ba9uu9o/

JSFIDDLE Link using <ul> element as requested in comments

https://jsfiddle.net/Panomosh/3ba9uu9o/4/

Upvotes: 1

Jai
Jai

Reputation: 74738

You have to put the input in the bound event: 

const form = document.getElementById('inputForm');

form.addEventListener('submit', (e) => {
  e.preventDefault(); // stop the form submission
  const input = form.querySelector('input');
  const boxInput = input.value; // get the value
  let box = document.querySelector('#boxes');
    box.innerHTML="";
  for (let i = 0; i < boxInput; i++) { // loop over the input value
    let div = document.createElement('div'); // create div elem
    div.textContent = `Box-${i}`
    box.appendChild(div); // now append in the DOM elem
  }
});
<div class="input-container">
  <form id="inputForm">
    <input type="number" id="input-box" name="quantity" min="1" max="">
    <input id="filldetails" name="submit" type="submit" value="Add 
       boxes">
  </form>
</div>

<!--_-_-_-_BOX-Container_-_-_-_-->
<div class="boxes-container">
  <div id="boxes"></div>
</div>

Upvotes: 0

John Vandivier
John Vandivier

Reputation: 2426

Here is a solution based on your codepen, no jQuery needed:

var form = document.getElementById('inputForm');

 form.addEventListener('submit', function(e) {
  e.preventDefault(); // stop the form submission

  var input = form.querySelector('input');
  var boxInput = input.value;

  for(var i=0; i < boxInput; i++){
     var div = document.createElement('div');
     div.className = 'box';
     document.getElementById('boxes-container').appendChild(div);
  }
});
#boxes-container {
  width: 100%;
  display: flex;
  margin: 10px;
  flex-wrap': 'wrap;
}

.box {
  background-color: tomato;
  margin: 10px;
  width: 50px;
  height: 50px;
  border-radius: 5px;
  opacity: 0.5;
}
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:700" rel="stylesheet">
</head>

<body>
  
  <!--_-_-_-_INPUT_FIELD_-_-_-_-->
  <div class="input-container">
    <form id="inputForm">
      <input type="number" id="input-box" name="quantity" min="1" max="">
      <input id="filldetails" name="submit" type="submit" value="Add boxes">
    </form>
  </div>
  
  <!--_-_-_-_BOX-Container_-_-_-_-->
  <div id="boxes-container">
    <div class="box"></div>
  </div>
  
</body>

Upvotes: 0

Related Questions