html - Javascript For Loop keeps doubling up my divs -

i have written script creates number of fields based on number user inputs (k).

i wrote script create correct number of fields. wanted arrange them vectors on screen, adapted script.

i wanted following script create correct number of fields , place them in divs, lay them out wish on page.

since doing this, script produces duplicate divs iff runs through loop twice, can't life of me work out why...

function createfields(k) { k=k+1  (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");      } } 

any clues?

updated:

the code called via function:

function getvectors() { v = document.getelementbyid("vectorn").value; v=parseint(v); //turn text integer document.getelementbyid("q1").innerhtml="enter vectors below!"; createfields(v); document.getelementbyid("enter").innerhtml="<input type=\"button\" id=\"button\" value=\"submit numbers\" onclick=\"canvas()\"/>";  } 

which called onchange in html:

<p id="q1">how many vectors need?         <input id="vectorn" name="vectorn" type="text" onchange="getvectors()" size="4" maxlength="4">       </p> 

further update

after checking console.log, place calls createfields() getvectors() function. appear calling createfields twice (despite doing once in script). place calls getvectors() onchange event in input field. possible when change innerhtml , remove input field being registered onchange event , calling function again?

this so question sheds light on problem. i'd been tabbing out of text box, triggers onchange event once. pressing enter fires twice, problem getting.

there couple of ways around this. i've chosen keep track of number of fields entered. if changes, generate fields. if not nothing.

var fields = 0;  function createfields(k) {     if (k != fields) {         fields = k;         console.log("fields: " + k);          //rest of code same;     } } 

demo: http://jsfiddle.net/ej8ly/5/

you similar in getvectors() function instead.