CODEWITHSUNDEEP
javascriptjquery
Michael Schwartz
Michael Schwartz

Reputation: 8415

Input number's value to append div's

Fiddle - http://liveweave.com/enRy3c

Here's what I'm trying to do.

Say my input number is 5. I want to dynamically append 5 divs to the class .enfants. However I haven't figured out how to do that. I been searching and searching and I haven't came across anything.

jQuery/JavaScript:

var counter = 1;

// Value number = .enfants children
$(".ajouter-enfants").on('keyup change', function() {
  var yourChildren = "<div>" + counter++ + "</div>";
  var CallAppend = function() {
    $(".enfants").append( yourChildren );
  };
  
  // If 0 or empty clear container
  if ( $.inArray($(this).val(), ["0", "", " "]) > -1 ) {
    $(".enfants").html("");
    // If only add/have 1 div in container
  } else if ($(this).val() === "1") {
    $(".enfants").html("").append( yourChildren );
    // If > 0 add as many divs as value says
  } else {
    $(".enfants").html("");
    CallAppend();
  }
});

HTML:

<div class="contenu" align="center">
  <div>
    Value number = .enfants children
  </div>
  <input type="number" min="0" class="ajouter-enfants" value="0" />
  <div class="enfants">

  </div>
</div>

Upvotes: 0

Views: 309

Answers (3)

Neeraj
Neeraj

Reputation: 764

How would you get it to only append the value amount? It appends more when the value is (2 becomes 3, 3 becomes 6, 4 becomes 10 and repeats even when I'm decreasing the numeric value) – @Michael Schwartz

Here is another code example that might be helpfull. 

$(".ajouter-enfants").on('change', function() {
  var numDivs = $(this).val();
  var i;
  var html ='';
  for (i = 1; i <= numDivs; i += 1) {
  html += '<div>' + i + '</div>';       
  }
   $('.enfants').empty().append(html);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contenu" align="center">
  <div>
    Value number = .enfants children
  </div>
  <input type="number" min="0" class="ajouter-enfants" value="0" />
  <div class="enfants">

  </div>
</div>

Upvotes: 0

dencey
dencey

Reputation: 1061

Try this:

$(".ajouter-enfants").on('keyup change', function() {
    var num = +$.trim($(this).val()), target = $(".enfants"), i = 0, s = '';

    target.empty();
    if (!isNaN(num) && num > 0) {
        for (; i < num; i++) {
            s += '<div>' + (i + 1) + '</div>';
        }
        target.html(s);
    }
});

Upvotes: 0

Alex McMillan
Alex McMillan

Reputation: 17952

How about a simple loop? If you just want to append, try something like this:

$(".ajouter-enfants").on('change', function() {
  var numDivs = $(this).val();
  var i;

  for (i = 1; i <= numDivs; i += 1) {
    $('.enfants').append('<div>' + i + '</div>');
  }
});

EDIT:

If you want to replace instead of append the newly-created <div>'s, try something like:

$(".ajouter-enfants").on('keyup change', function() {
  var content = '';
  var numDivs = $(this).val();
  var i;

  for (i = 1; i <= numDivs; i += 1) {
    content += '<div>' + i + '</div>';
  }

  $('.enfants').html(content);
});

This will replace the entire content of any elements using the class ajouter-enfants with the number of <div>'s specified in the input box.

Upvotes: 1

Related Questions