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 (onkeyup, change) 的字段上可能有 2 个事件侦听器？

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

Answer 2

这个SO Question 阐明了这个问题。我一直在跳出文本框，它只会触发一次onChange 事件。按 Enter 会触发两次，这就是您遇到的问题。

有几种方法可以解决这个问题。我选择跟踪输入的字段数。如果这种情况发生变化，请生成字段。如果不是什么都不做。

var fields = 0;

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

        //Rest of the code the same;
    }
}

演示：http://jsfiddle.net/Ej8Ly/5/

您也可以在 getVectors() 函数中执行类似的操作。

Answer 3

与其用 DOM “创建”所有元素，为什么不构建一个“字符串”，然后设置一个容器对象 .innerHTML = the_string 值？这样，函数是否被调用两次都没关系，因为它只会在第二次覆盖自己并产生相同的输出。