我试图迭代地添加输入,并且能够在每个输入上独立运行计算,但是似乎无法应用闭包原理。计算功能仅适用于最后添加的项目。我已经尝试在内部函数以及主要函数(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/