javascript - 通过输入字段的值控制 HTML 元素的数量

Question

我正在尝试构建一个基于 JavaScript 的布局网格生成器，我想在其中通过输入字段的值来控制网格行数。例如。如果我输入 12，我的容器-div 应该有 12 个 div。我已经做了一个可以处理这个的函数......

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

    }
}

...但它的缺点是，我所做的每一个进一步的输入都会再次添加一些 div。如何将子 div 的总数限制为输入字段的实际值？

Answer 1

如果想做成动态的，每次函数执行时，只要清空容器div，加上输入值对应的div个数即可。像这样:

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 一个简单的 if else block 应该适合你。