Create div in for loop with number

Question

I am creating <div>s from a for loop based on user input. So if a user types 10 I want to create 10 <div>s with the text: ITEM 1, ITEM 2, ITEM 3, etc.

var select = $('#dropoptions').val();
var number = $('input').val(); 
$('.result').remove();
for (var i = 0; i < number; i++) {
  container.innerHTML += `<div class="result">ITEM ${select}</div>`; 
}

How can I add number in orders for the created <div>s?

What do you mean by "add number in orders for created div" ? — Aurea
– Aurea, Commented Jul 18, 2017 at 23:08
1. where does container come from? 2. it's better to append your string into a variable then add it to the container after the loop. 3. number is a string. convert it to a number using parseInt(); — Ibu
– Ibu, Commented Jul 18, 2017 at 23:09
when divs are created i want text inside the div to be for first div 1, second 2, third 3 etc @AurelBílý — lejhbah
– lejhbah, Commented Jul 18, 2017 at 23:10
If you wanted "Item {Number}" then you should be using i instead of select, eg ${i+1} — Patrick Evans
– Patrick Evans, Commented Jul 18, 2017 at 23:11
Why do you not use the variable i (or i + 1 for 1 ... n)? — Aurea
– Aurea, Commented Jul 18, 2017 at 23:11

Joel · Accepted Answer · 2017-07-19 08:53:20Z

3

Just add i in your for loop to the string, like '<div class="result">ITEM' + i + '</div>'

var select = $('#dropoptions').val();
var number = $('input').val(); 
$('.result').remove();
for (var i = 0; i < number; i++) {
  container.innerHTML += '<div class="result">ITEM' + (i + 1) + '</div>'; 
}

edited Jul 19, 2017 at 8:53

Joel

1006 bronze badges

answered Jul 18, 2017 at 23:11

Dij

9,8184 gold badges21 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dij Over a year ago

@lejhbah you are welcome, consider accepting the answer, if it helped. Cheers!

Milan Chheda · Accepted Answer · 2017-07-19 08:41:30Z

0

Here is a working example. You need to make 2 changes:

Change ${select} to (i+1)
(i+1) because it should start from 1 and not 0

container = document.getElementById('container');
var number = 10;
for (var i = 0; i < number; i++) {
  container.innerHTML += '<div class="result">ITEM' + (i + 1) + '</div>';
}

<div id='container'></div>

answered Jul 19, 2017 at 8:41

Milan Chheda

8,2593 gold badges23 silver badges35 bronze badges

Collectives™ on Stack Overflow

Create div in for loop with number

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related