我试图迭代地添加输入,并且能够在每个输入上独立运行计算,但是似乎无法应用闭包原理。计算功能仅适用于最后添加的项目。我已经尝试在内部函数以及主要函数(addIt())周围使用for循环,但这似乎只会使事情变得更糟...
这是基本的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函数在那里不起作用,尽管它对我来说是本地工作的,但是仅删除了最早的迭代。关于我如何工作的任何想法也受到欢迎和赞赏。

最佳答案

    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 - JavaScript封闭,只是没有得到它,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35233573/

10-09 15:41