Javascript For Loop让我的div翻倍

我编写了一个脚本，它根据用户输入的数字（k）创建了许多字段

我最初编写了一个脚本，可以创建正确数量的字段。然而，我想把它们像向量一样排列在屏幕上，所以我修改了我的脚本

我希望下面的脚本能够创建正确数量的字段，并将它们放在div中，这样我就可以在页面上按照自己的意愿进行布局

既然这样做了，脚本现在会在循环中运行两次时产生重复的div，但我一辈子都不知道为什么

function createFields(k)
{
k=k+1

for (var n=1; n<k; n++) {

    var makeBox=document.createElement("div");
    makeBox.id = "box" + n;
    document.getElementById("top").appendChild(makeBox);
    document.getElementById("box" + n).setAttribute('class',"box");

    var addOpen=document.createElement("div");
    addOpen.id = "open"+n;
    document.getElementById("box" + n ).appendChild(addOpen);
    document.getElementById("open" + n).setAttribute('class',"open");

    var vectorBox=document.createElement("div");
    vectorBox.id = "vector" + n;
    document.getElementById("box" + n).appendChild(vectorBox);
    document.getElementById("vector" + n).setAttribute('class',"vect");

    var xVector=document.createElement("div");
    xVector.id = "top" + n;
    document.getElementById("vector" + n).appendChild(xVector);
    document.getElementById("top" + n).setAttribute('class',"xVect");

    var newx=document.createElement("input");
    newx.id = "x" + n;
    document.getElementById("top" + n).appendChild(newx);
    document.getElementById("x" + n).setAttribute('name',"x" + n);
    document.getElementById("x" + n).setAttribute('type',"text");
    document.getElementById("x" + n).setAttribute('size',"4");
    document.getElementById("x" + n).setAttribute('maxlength',"4");

    var yVector=document.createElement("div");
    yVector.id = "bottom" + n;
    yVector.class = "yVect";
    document.getElementById("vector" + n).appendChild(yVector);
    document.getElementById("bottom" + n).setAttribute('class',"yVect");

    var newy=document.createElement("input");
    newy.id = "y" + n;
    document.getElementById("bottom" + n).appendChild(newy);
    document.getElementById("y" + n).setAttribute('name',"y" + n);
    document.getElementById("y" + n).setAttribute('type',"text");
    document.getElementById("y" + n).setAttribute('size',"4");
    document.getElementById("y" + n).setAttribute('maxlength',"4");

    var addClose=document.createElement("div");
    addClose.id = "close"+n;
    document.getElementById("box" + n ).appendChild(addClose);
    document.getElementById("close" + n).setAttribute('class',"close");

    }
}

函数createFields（k）
{
k=k+1
对于（var n=1；n您的函数看起来很好。您不只是调用函数两次吗？在
函数createFields（k）{
之后立即执行console.log以检查是否是这种情况。在用户输入k（onkeyup，change）的字段上可能有两个事件侦听器

如果您不确定从何处调用createFields。请在所有文件中查找createFields。在调用createFields之前添加一个
console.log（'Calling createFields from'）；
。
而不是使用DOM“创建”所有元素，为什么不构建一个“字符串”然后设置一个container objects
。innerHTML=字符串值？这样，函数调用两次就无关紧要了，因为它只会在第二次重写自己并产生相同的输出。
这就说明了问题。我已经从文本框中退出，它只会触发
onChange
事件一次。按enter键将触发它两次，这就是您遇到的问题

有两种方法可以解决这个问题。我选择跟踪输入的字段数量。如果更改，则生成字段。如果不更改，则不执行任何操作

var fields = 0;

function createFields(k) {
    if (k != fields) {
        fields = k;
        console.log("Fields: " + k);

        //Rest of the code the same;
    }
}

演示：

您还可以在
getVectors（）中执行类似的操作
函数。
@Ismail纯javascript是faster@Ismail：代码中显示的冗长可以很容易地消除，而无需借助大型DOM库。我不知道。我正在从字段中获取输入，以便在HTML 5画布上绘制。要在画布上绘制，我需要一个javascript（从今天的W3C学校看）你知道为什么要循环两次吗？
createFields（）
是如何调用的？@Maffster检查我的答案。我猜你调用了两次函数。只需在函数createFields中添加一行。第一行。这行写着：
console.log（'createFields用这些参数调用：'，参数）；
@Maffster将如何调用createFields添加到原始问题中。注释中的代码很难阅读。请再次更新原始问题。我们不应该在注释中一对一地聊天。这不是注释的目的。感谢您的回答。至少我知道现在为什么会发生这种情况。我在getVectors（）上设置了类似的陷阱函数使其按我所希望的方式工作。谢谢！
<p id="q1">How many Vectors will you need?
        <input id="vectorN" name="vectorN" type="text" onChange="getVectors()" size="4" maxlength="4">
      </p>

var fields = 0;

function createFields(k) {
    if (k != fields) {
        fields = k;
        console.log("Fields: " + k);

        //Rest of the code the same;
    }
}