Using loop to generate user defined form but elements vanish at end of loop-CodePudding

I am using the following code to generate a user-defined number of text inputs via a loop.

The generated inputs vanish after being generated in the loop - I am not sure why? I suspect I am missing something very simple?

The next step for the program will be to take the user input from the generated text inputs and put them into an array of arrays if that's in any way relevant?

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>

Any help, particularly pointing out obvious rookie errors, gratefully recieved.

CodePudding user response：

It's because the input's type is set to submit, which causes the form to be submitted when it is clicked.

You can stop the form from submitting by adding return false in the onsubmit handler:

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>

CodePudding user response：

either change the submit button to a button or preventDefault() to stop the submission of the form

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>