Wie kommt man Wert von dynamisch generierten DOM Eingabeelementen Java

Question

so habe ich diesen HTML-Code:

<form method="get" action="#" id="startForm"> 
    <input type="text" name="period" id="period" placeholder="The number of days"/> 
    <input type="submit" name="submit" value="submit" id="startSubmit"/> 
</form> 

und dies ist der JavaScript-Code:

var btnSubmit = document.getElementById('startSubmit'); 
btnSubmit.addEventListener('click', function (e) { 

    e.preventDefault(); 
    var myForm = document.createElement('form'); 
    var period = document.getElementById('period').value; 

    for(var i = 0; i < period ; i++){ 

     var input0 = document.createElement('input'); 

     input0.setAttribute('type', 'text'); 
     input0.setAttribute('placeholder', 'The count of tasks'); 
     input0.setAttribute('style', 'margin: 10px'); 
     input0.setAttribute('id', 'taskDone'+i); 
     input0.setAttribute('onchange', 'myFunction()'); 

     document.body.appendChild(input0); 
     myForm.appendChild(input0); 
     document.body.appendChild(myForm); 

     function myFunction(){ 
      var taskDone = document.getElementById('taskDone').value; 
      var newForm = document.createElement('form'); 

      for(var j = 0; j < taskDone ; j++){ 

       var input1 = document.createElement('input'); 

       input1.setAttribute('type', 'text'); 
       input1.setAttribute('id', 'time'+i); 

       document.body.appendChild(input1); 
       newForm.appendChild(input1); 
       document.body.appendChild(newForm); 
      }; 
     }; 
    }; 
    console.log(myForm); 
}); 

so mein Problem ist, dass in der Funktion Wenn ich versuche, den Wert aus dem generierten DOM-Element zu übernehmen, wird die Seite zurückgesetzt, was ich tun möchte, ist die Zahl, die in die Eingabe eingefügt werden soll, und so viele neue Eingabefelder wie die Zahl eingegeben wird (es nimmt die Zahl aus dem generierten dom-Element und erstellt ein neues dom-Element)

Answer 1

Sie sind nur die Verschwendung von Speicher tun müssen Sie die Definition der Funktion in einer Schleife nicht platzieren. Sie müssen es außerhalb des Blocks oder einer separaten Definition platzieren. Sie sollten die Funktion nur innerhalb der Schleife aufrufen. Doch in Ihrem

myFunction() 

Sie versuchen, die ID eines Elements zu erhalten, die nicht vorhanden ist, wie Sie das Element mit id = 'taskdone'+i. erstellt haben, so müssen Sie auch anhängen ‚i‘ im Inneren des myFunction() Element zu erhalten IDs. Aber ich werde vorschlagen, dass es einen sauberen Weg zu dieser Aufgabe gibt, übergeben Sie einfach das Element in myFunction bei der Änderung des Wertes des Elements. Verwendung so etwas wie das:

`input0.setAttribute('onchange', 'myFunction(this)');` 

Dann würden Sie nicht mehr das Element id benötigen um seinen Wert zu erhalten. und erstellen Sie Ihre myFunction wie folgt aus:

function myFunction(element) { 
    var id = element.id; 
    var taskDone = element.value; 
    var i = id.split('taskDone')[1]; 
    var newForm = document.createElement('form'); 

    for (var j = 0; j < taskDone; j++) { 

     var input1 = document.createElement('input'); 

     input1.setAttribute('type', 'text'); 
     input1.setAttribute('id', 'time' + i); 

     document.body.appendChild(input1); 
     newForm.appendChild(input1); 
     document.body.appendChild(newForm); 
    }; 
}; 

das Snippet Siehe für weitere Informationen und Hilfe:

var btnSubmit = document.getElementById('startSubmit'); 
 
\t \t console.log(btnSubmit); 
 
btnSubmit.addEventListener('click', function (e) { 
 

 
    e.preventDefault(); 
 
    var myForm = document.createElement('form'); 
 
    var period = document.getElementById('period').value; 
 

 
    for(var i = 0; i < period ; i++){ 
 

 
     var input0 = document.createElement('input'); 
 

 
     input0.setAttribute('type', 'text'); 
 
     input0.setAttribute('placeholder', 'The count of tasks'); 
 
     input0.setAttribute('style', 'margin: 10px'); 
 
     input0.setAttribute('id', 'taskDone'+i); 
 
     input0.setAttribute('onchange', 'myFunction(this)'); 
 

 
     document.body.appendChild(input0); 
 
     myForm.appendChild(input0); 
 
     document.body.appendChild(myForm); 
 

 
    }; 
 
    console.log(myForm); 
 
}); 
 
function myFunction(element){ 
 
      var id = element.id; 
 
\t \t \t var taskDone = element.value; 
 
\t \t \t var i = id.split('taskDone')[1]; 
 
      var newForm = document.createElement('form'); 
 

 
      for(var j = 0; j < taskDone ; j++){ 
 

 
       var input1 = document.createElement('input'); 
 

 
       input1.setAttribute('type', 'text'); 
 
       input1.setAttribute('id', 'time'+i); 
 

 
       document.body.appendChild(input1); 
 
       newForm.appendChild(input1); 
 
       document.body.appendChild(newForm); 
 
      }; 
 
     };

<form method="get" action="#" id="startForm"> 
 
    <input type="text" name="period" id="period" placeholder="The number of days"/> 
 
    <input type="submit" name="submit" value="submit" id="startSubmit"/> 
 
</form>

Answer 2

Sie müssen die Funktion myFunction() als myFunction = function(){..} definieren Zweitens muss das ID-Attribut eindeutig sein. Daher verwenden

input0.setAttribute('id', 'taskDone'+i); die ID und

input0.setAttribute('onchange', 'myFunction("'+i+'")'); 

rufen die Funktion einzustellen.

Zugriff auf ähnliche Weise die ID als

var taskDone = document.getElementById('taskDone'+i).value; 

die Geige Versuchen - https://jsfiddle.net/djbb79d8/