Question

我正在尝试迭代地添加输入，并且能够独立地运行计算，但似乎无法应用闭包原则。计算功能仅适用于添加的最后一项。我尝试过使用for循环以及main函数（addIt（）），但它似乎只会让事情变得更糟...... 这是基本的html：

<button class="btn btn-default btn-block" onClick="addIt('Item'+count)">Add One</button>

<form>
     <div id="itemForm"></div> 
<form>

这是我过于复杂和不优雅的js（顺便说一下，我愿意采取更好的方式来做到这一点，所以请不要犹豫，跳过这一切）：

count = 0;
        addIt = function(p) {
                count++;
                var itFrm = document.getElementById("itemForm");
                var itDiv = document.createElement("div");
                var children = itFrm.children.length + 1
                itDiv.setAttribute("id", "itemDiv")
                itDiv.appendChild(document.createTextNode(p));
                itFrm.appendChild(itDiv);

                var remove = document.createElement("a");
                var linkText = document.createTextNode("Remove It");
                remove.setAttribute("href", "#");   
                remove.setAttribute("onClick", "removeIt()");
                remove.appendChild(linkText);

                var brk = document.createElement("br");

                var num = document.createElement("input");
                num.setAttribute("id", "numInput"+count);
                num.setAttribute("type", "number");
                num.oninput = function () {
                                var numInput = document.getElementById('numInput'+count).value ;    
                                var divisor = 10;
                                var result = document.getElementById('result'+count);   
                                var myResult = (Number(numInput) / Number(divisor));
                                result.value = myResult;
                                };
                num.setAttribute("placeholder", "Set number...");

                var clc = document.createElement("input");
                clc.setAttribute("id", "result"+count);
                clc.setAttribute("readonly", "readonly");
                clc.setAttribute("placeholder", "After Calculation...");

                var hr = document.createElement("hr");

                itDiv.appendChild(remove);
                itDiv.appendChild(num);
                itDiv.insertBefore(brk, num);
                itDiv.appendChild(clc);
                itDiv.appendChild(hr);
            };

            function removeIt(elem) {
                var elem = document.getElementById('itemDiv');
                elem.parentNode.removeChild(elem);
                return false;
            };

我尝试设置jsfiddle here但由于某种原因，removeIt函数在那里不起作用，虽然它在本地为我工作，但只删除了最早的迭代。关于我如何拙劣的任何想法都受到欢迎和赞赏。

Answer 1

    var countString = count.toString();   
    num.oninput = function() {
    var numInput = document.getElementById('numInput' + countString).value;
    var divisor = 10;
    var result = document.getElementById('result' + countString);
    var myResult = (Number(numInput) / Number(divisor));
    result.value = myResult;   };

这是一个计数的范围问题。它基本上是一个全局变量，因此闭包将寻找它。使用在每个按钮上重新声明的局部变量来修复它。

JavaScript关闭，只是没有得到它

1 个答案: