如何停止在JavaScript中无限克隆表单字段

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

本文关键字：表单 字段 无限 何停止 JavaScript      更新时间：2023-09-26

我更像是一个HTML/CSS的人，所以JavaScript对我来说还是很新的。我将感谢您的帮助！

我在JSfiddle上发现了一个几乎完全满足我需求的JavaScript片段。我正在寻找一种方法来克隆一个点击按钮的表单字段。问题来了。每次单击按钮时，此代码都会无限添加一个新字段。我真的需要限制为2个新字段（所以总共有3个字段）。然后我希望这个按钮在最后一个字段被克隆后消失，这样用户就不会试图反复点击它。这是链接：JS Fiddle链接

以下是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);
}

谢谢！

您已经在跟踪重复的数量，所以添加

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

到您的duplicate()功能，在点击2次后禁用该按钮

JSfiddle

还要注意拼写！你有onlick="duplicate()"而不是onclick=duplicate()，除了复印机的各种拼写错误

添加一个计数器。它将检查已经创建的字段的数量是否<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++;
}

只需将if条件替换为此if (i >= 2) {，这里我们将检查i是否大于或等于2，从而隐藏按钮。

相关文章：