使用javascript使用文本框值（数字）动态复制div

我正在创建POC。在一种情况下，我必须在文本框中根据div必须使用id生成的号码的计数输入号码当前我已创建变量call count，我正在为div分配循环计数，按钮使用id生成。但当我在文本框中输入号码时，不会发生这种情况

这是密码

function createElements(){
    var count = 5,  

    fragment = document.createDocumentFragment();
    for (var j = 0; j < count; ++j) {
        div = document.createElement('div');
        button = document.createElement('button');
        button.className = "btn";
        button.setAttribute('id', ['pag_navg' + j]);
        button.innerHTML=[1 + j];

        div.className = "page";
        div.setAttribute('id', ['page' + j]);

        div.style.position="absolute";            
        fragment.appendChild(div);
        fragment.appendChild(button);
    }
    document.body.appendChild(fragment);
}

函数createElements（）{
var计数=5，
fragment=document.createDocumentFragment（）；
对于（变量j=0；j

这是你的电话号码

请帮帮我

提前谢谢。

函数createElements（）{
var count=document.getElementById（“inputAdd_页面”）.value；
fragment=document.createDocumentFragment（）；
对于（变量j=0；j

Firefox不支持

onfocusout

事件，您可以使用

onblur

。 还可以使用

event.target.value

获取要创建的元素数。下面是一个工作示例：

用于HTML：

<input type="text" id="inputAdd_page"   onblur="createElements(this.value)" />
    <div id="page" class="page">
        &nbsp
    </div>

对于您的Javascript：

function createElements(value){

    fragment = document.createDocumentFragment();
    for (var j = 0; j < value; ++j) {
        div = document.createElement('div');
        button = document.createElement('button');
        button.className = "btn";
        button.setAttribute('id', ['pag_navg' + j]);
        button.innerHTML=[1 + j];

        div.className = "page";
        div.setAttribute('id', ['page' + j]);

        div.style.position="absolute";            
        fragment.appendChild(div);
        fragment.appendChild(button);
    }
  document.body.appendChild(fragment);
}

函数createElements（值）{
fragment=document.createDocumentFragment（）；
对于（var j=0；j

我看到您使用so复制了元素的

ID

。使用全局计数器跟踪它

// Maintain a variable that holds the current value
var totalCount = 0;
function createElements(){
 var count = document.getElementById("inputAdd_page").value;
    // Gaurd condition
    // Only if it is a number
    if(count && !isNaN(count)) {
        fragment = document.createDocumentFragment();
        for (var j = 0; j < count; ++j) {
            div = document.createElement('div');
            button = document.createElement('button');
            button.className = "btn";
            button.setAttribute('id', ['pag_navg' + totalCount + j]);
            button.innerHTML=[1 + j];

            div.className = "page";
            div.setAttribute('id', ['page' + totalCount + j]);

            div.style.position="absolute";            
            fragment.appendChild(div);
            fragment.appendChild(button);
            totalCount++;
        }
      document.body.appendChild(fragment);
    }
}

//维护一个保存当前值的变量
var totalCount=0；
函数createElements（）{
var count=document.getElementById（“inputAdd_页面”）.value；
//高尔德条件
//除非是一个数字
如果（计数&&！isNaN（计数））{
fragment=document.createDocumentFragment（）；
对于（变量j=0；j

编辑

还应避免将事件绑定到内联。使用Vanilla JS绑定事件，因为它有助于分离关注点

   // Maintain a variable that holds the current value
var inputElement = document.getElementById("inputAdd_page"),
    totalCount = 0;
debugger;
inputElement.addEventListener('blur', function() {
    var count = this.value;
    // Gaurd condition
    // Only if it is a number
    if(count && !isNaN(count)) {
        fragment = document.createDocumentFragment();
        for (var j = 0; j < count; ++j) {
            div = document.createElement('div');
            button = document.createElement('button');
            button.className = "btn";
            button.setAttribute('id', ['pag_navg' + totalCount + j]);
            button.innerHTML=[1 + j];

            div.className = "page";
            div.setAttribute('id', ['page' + totalCount + j]);

            div.style.position="absolute";            
            fragment.appendChild(div);
            fragment.appendChild(button);
            totalCount++;
        }
      document.body.appendChild(fragment);
    }
});

//维护一个保存当前值的变量
var inputElement=document.getElementById（“inputAdd_页面”），
totalCount=0；
调试器；
inputElement.addEventListener（'blur'，function（）{
var count=这个值；
//高尔德条件
//除非是一个数字
如果（计数&&！isNaN（计数））{
fragment=document.createDocumentFragment（）；
对于（变量j=0；j

---

@Mahadevan我的坏。。需要注意的两件事。事件绑定应该是

模糊

，而不是

单击

。。jsFiddle扩展下的第二个选项应该是

onLoad

或

in body

，因为绑定事件时元素应该可用。我已经编辑了小提琴供你参考。

   // Maintain a variable that holds the current value
var inputElement = document.getElementById("inputAdd_page"),
    totalCount = 0;
debugger;
inputElement.addEventListener('blur', function() {
    var count = this.value;
    // Gaurd condition
    // Only if it is a number
    if(count && !isNaN(count)) {
        fragment = document.createDocumentFragment();
        for (var j = 0; j < count; ++j) {
            div = document.createElement('div');
            button = document.createElement('button');
            button.className = "btn";
            button.setAttribute('id', ['pag_navg' + totalCount + j]);
            button.innerHTML=[1 + j];

            div.className = "page";
            div.setAttribute('id', ['page' + totalCount + j]);

            div.style.position="absolute";            
            fragment.appendChild(div);
            fragment.appendChild(button);
            totalCount++;
        }
      document.body.appendChild(fragment);
    }
});