Estoy usando el siguiente código para generar un número definido por el usuario de entradas de texto a través de un bucle.
Las entradas generadas desaparecen después de generarse en el bucle; no estoy seguro de por qué. ¿Sospecho que me estoy perdiendo algo muy simple?
El siguiente paso para el programa será tomar la entrada del usuario de las entradas de texto generadas y colocarlas en una matriz de matrices si eso es relevante de alguna manera.
function Player_Entry(){ Loop_End = document.getElementById('Select_Number_Of_Players').value; for (Loop_Count = 0; Loop_Count < Loop_End; Loop_Count++) { Variable_Name = "Player_Name_" + Loop_Count + 1 Variable_Number = "Player_Number_" + Loop_Count + 1 console.log("Created, Variable Number: " + Variable_Name); console.log("Created, Variable Name: " + Variable_Number); var Variable_Name = document.createElement("input"); Variable_Name.type = "text"; Variable_Name.value = ""; document.getElementById('Generated_Form').appendChild(Variable_Name); } } <form onsubmit="Player_Entry()"> <label for="Number_Of_Players">Number of players</label> <input type="number" id="Select_Number_Of_Players" value="1" name="Number_Of_Players" min=1 max =12><input type ="submit"> </form> <br>Enter Player Names<br> <form id="Generated_Form"></form>Cualquier ayuda, particularmente señalando errores obvios de novato, se recibe con gratitud.
Es porque el type de input está configurado para submit , lo que hace que el formulario se envíe cuando se hace clic en él.
Puede detener el envío del formulario agregando return false en el controlador onsubmit :
function Player_Entry() { Loop_End = document.getElementById('Select_Number_Of_Players').value; for (Loop_Count = 0; Loop_Count < Loop_End; Loop_Count++) { Variable_Name = "Player_Name_" + Loop_Count + 1 Variable_Number = "Player_Number_" + Loop_Count + 1 console.log("Created, Variable Number: " + Variable_Name); console.log("Created, Variable Name: " + Variable_Number); var Variable_Name = document.createElement("input"); Variable_Name.type = "text"; Variable_Name.value = ""; document.getElementById('Generated_Form').appendChild(Variable_Name); } } <form onsubmit="Player_Entry(); return false"> <label for="Number_Of_Players">Number of players</label> <input type="number" id="Select_Number_Of_Players" value="1" name="Number_Of_Players" min=1 max=12/> <input type="submit" /> </form> <br>Enter Player Names<br> <form id="Generated_Form"></form>cambie el botón de enviar a un botón o preventDefault() para detener el envío del formulario
function Player_Entry(){ event.preventDefault(); Loop_End = document.getElementById('Select_Number_Of_Players').value; for (Loop_Count = 0; Loop_Count < Loop_End; Loop_Count++) { Variable_Name = "Player_Name_" + Loop_Count + 1 Variable_Number = "Player_Number_" + Loop_Count + 1 console.log("Created, Variable Number: " + Variable_Name); console.log("Created, Variable Name: " + Variable_Number); var Variable_Name = document.createElement("input"); Variable_Name.type = "text"; Variable_Name.value = ""; document.getElementById('Generated_Form').appendChild(Variable_Name); } } <form onsubmit="Player_Entry()"> <label for="Number_Of_Players">Number of players</label> <input type="number" id="Select_Number_Of_Players" value="1" name="Number_Of_Players" min=1 max =12><input type ="submit"> </form> <br>Enter Player Names<br> <form id="Generated_Form"></form>