Question

我正在创建POC。在一个场景中，我必须在文本框中输入数字div，这个数字div必须用id生成。目前我已经创建了变量调用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);
}

以下是Fiddle Link

请帮助我。

提前致谢。

Answer 1

Firefox不支持onfocusout事件，您可以改用onblur。您还可以使用event.target.value来获取要创建的元素数量。这是一个工作示例：https://jsfiddle.net/c0x6mjac/9/

Answer 2

https://jsfiddle.net/c0x6mjac/7/

function createElements(){
 var count = document.getElementById("inputAdd_page").value;  

        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);
}

Answer 3

对于您的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);
}

Answer 4

我看到你正在使用这样复制元素的set.seed(1237) head(matrix(rnorm(500 * 20, 0, 4), nrow = 500), 2) [,1] [,2] [,3] [,4] [,5] [,6] [,7] [,8] [,9] [,10] [,11] [1,] -1.779413 2.0934980 -0.1130465 0.7155059 -4.357417 -0.1000385 -5.4510753 -2.135156 0.2134115 -6.747588 2.3818280 [2,] -7.892865 -0.6712141 -4.0481822 5.2750330 -3.053245 0.7502157 0.6026951 4.951890 1.8733383 1.860631 -0.7452204 [,12] [,13] [,14] [,15] [,16] [,17] [,18] [,19] [,20] [1,] 4.0730359 -3.246457 5.781667 2.4091225 -8.4262348 7.1438989 3.289772 -4.136308 -0.7102701 [2,] -0.5159794 4.144834 5.662559 0.9685914 0.9033701 0.3952698 10.734498 -2.213788 -2.3064852。使用全球计数器跟踪它。

ids

Check Fiddle

修改

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

// 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); } }

<强> Edited Fiddle

使用javascript，使用文本框值（Number）动态地复制div

4 个答案: