Control number of HTML-Elements by value of input field

Question

I'm trying to build a JavaScript-based Layout grid generator where I want to control the number of grid rows by the value of an input field. E.g. if I type in 12, my container-div should have 12 divs within. I already made a function that can handle this...

document.getElementById('numofrows').onkeyup=function(){
    var foo = [];
    for (var i=0; i<this.value ;i++) {
        foo[i] = document.createElement('div');
        container.appendChild(foo[i]);

    }
}

...But its drawback is, that every further input I make will add a number of divs again. How can I restrict the total number of child divs to what is just the actual value of the input field?

score 2 · Answer 1 · answered Apr 02 '14 at 11:34

If you want to make it dynamic, every time the function executes, just clear the container div and add the number of divs corresponding to the input value. Like this:

document.getElementById('numofrows').onkeyup=function(){
    document.getElementById('container').innerHTML='';
    var foo = [];
    for (var i=0; i<this.value ;i++) {
        foo[i] = document.createElement('div');
        container.appendChild(foo[i]);

    }
}

Else a simple if else block should be fine for you.

score 1 · Answer 2 · answered Apr 02 '14 at 11:24

1

var maxNumber = this.value;
for (var i=0; i<maxNumber;i++)

just check the value BEFORE the for and not at every step

answered Apr 02 '14 at 11:24

MrPk

2,862
2
20
26

score 1 · Answer 3 · edited Apr 02 '14 at 11:28

1

This is not the best way to go about the problem, but.

if('div'.Count >= MaxNumber){
    Do Not Add Child.
}else{
    Add Child.    
}

edited Apr 02 '14 at 11:28

Irvin Dominin

30,819
9
77
111

answered Apr 02 '14 at 11:27

StarScript

21
1

score 1 · Accepted Answer · answered Apr 02 '14 at 11:28

You can clear your children divs first, and then add the new list; like:

document.getElementById('numofrows').onkeyup = function () {
    var foo = [];

    // remove all the children of the parent element container
    while (container.firstChild) container.removeChild(container.firstChild);

    for (var i = 0; i < this.value; i++) {
        foo[i] = document.createElement('div');
        container.appendChild(foo[i]);

    }
}

Demo: http://jsfiddle.net/IrvinDominin/56VeH/

Thank you very much! Works like a charme. I liked the other answers as well, but this one seems to be the cleanest. — Circuit Circus, Apr 02 '14 at 11:48

Control number of HTML-Elements by value of input field

4 Answers4