如何停止无限克隆 JavaScript 内的表单域？

Question

我更像是一个 HTML/CSS 人，所以 JavaScript 对我来说还是很陌生。如果能提供任何帮助，我将不胜感激！

我在 JSfiddle 上找到了一个 JavaScript 片段，它几乎完全满足我的需要。我一直在寻找一种在单击按钮时克隆表单字段的方法。这就是问题所在。每次单击按钮时，这段代码都会无限添加一个新字段。我真的需要限制为 2 个新字段（因此总共有 3 个字段）。然后我希望按钮在最后一个字段被克隆后消失，这样用户就不会尝试重复点击它。我一整天都在尝试调整它，但没有运气。这是 link：JS Fiddle link

这是 JavaScript： document.getElementById('button').onclick = 重复；

var i = 0;
var original = document.getElementById('duplicater');

function duplicate() {
    var clone = original.cloneNode(true); 
    clone.id = "duplicetor" + ++i; 
    original.parentNode.appendChild(clone);
}

谢谢！

Answer 1

添加一个计数器。它将检查已创建的字段数是否为 <2，如果为 > 或 =

，则不再运行

var i = 0;
var original = document.getElementById('duplicater');

var count = 0;

function duplicate() {
    if(count<2) {
        var clone = original.cloneNode(true); 
        clone.id = "duplicetor" + ++i; 
        original.parentNode.appendChild(clone);
    }

    count++;
}

Answer 2

您已经在跟踪重复的数量，因此添加

if (i === 2) {
    document.getElementById('button').disabled = true;
}

到您的 duplicate() 函数以在点击 2 次后禁用按钮

JSfiddle

还要注意拼写！除了 duplicator

的各种拼写错误之外，你还有 onlick="duplicate()" 而不是 onclick=duplicate()

Answer 3

只需用这个 if (i >= 2) { 替换您的 if 条件，这里我们正在检查 i 是否大于或等于 2，因此隐藏了按钮。

如何停止无限克隆 JavaScript 内的表单域？

How can I stop infinite cloning of a form field within JavaScript?

javascript

forms

clone

field