Javascript For Loop 不断加倍我的 div

Question

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

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

我想要以下脚本来创建正确数量的字段并将它们放置在 DIVS 中，这样我就可以按照我希望的方式在页面上布置它们。

自从执行此操作后，脚本现在会生成重复的 DIVS，因为当且仅当它在循环中运行两次，但我终生无法弄清楚为什么...

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");

    }
}

有什么线索吗？

更新:

代码通过另一个函数调用:

function getVectors()
{
v = document.getElementById("vectorN").value;
v=parseInt(v); //turn the text into an integer
document.getElementById("q1").innerHTML="Enter your Vectors below!";
createFields(v);
document.getElementById("enter").innerHTML="<input type=\"button\" id=\"button\" value=\"Submit Numbers\" onclick=\"canvas()\"/>";

}

在 html 中由 onchange 调用:

<p id="q1">How many Vectors will you need?
        <input id="vectorN" name="vectorN" type="text" onChange="getVectors()" size="4" maxlength="4">
      </p>

进一步更新

查看console.log后，唯一调用 createFields() 的地方是 getVectors() 函数。它似乎确实调用了 createFields 两次(尽管在脚本中只调用了一次)。唯一调用 getVectors() 的地方是输入字段中的 onChange 事件。当我更改 innerHTML 并删除输入字段时，是否有可能将其注册为 onChange 事件并再次调用该函数？

Answer 1

您的函数看起来不错。你不只是调用函数两次吗？在 function createFields(k) { 之后立即执行 console.log 以检查是否是这种情况。也许在用户输入 k 的字段上有 2 个事件监听器(onkeyup，change)？

如果您不确定从哪里调用 createFields。在所有文件中查找并查找 createFields。在调用 createFields 之前添加 console.log('Calling createFields from here');。