Entonces tengo este código HTML:

<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>

Y este es el código JavaScript:

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);
});

Entonces mi problema es que en la función cuando intento tomar el valor del elemento DOM generado, restablecerá la página, lo que quiero hacer es tomar el número que se colocará en la entrada y hacer tantas entradas nuevas cuadros de texto ya que se escribe el número (toma el número del elemento dom generado y crea un nuevo elemento dom)

-1
Яни Георгиев 9 jul. 2017 a las 07:29

2 respuestas

La mejor respuesta

Solo está desperdiciando memoria, no debe colocar la definición de función dentro de un bucle. Debe colocarlo fuera del bloque o una definición separada. Solo debe llamar a la función dentro del bucle. Sin embargo, dentro de tu

myFunction() 

Está tratando de obtener la identificación de un elemento que no existe ya que ha creado el elemento con id = 'taskdone'+i.. Por lo tanto, también debe agregar 'i' dentro de myFunction () para obtener las identificaciones de los elementos. Pero le sugeriré que hay una forma limpia de esta tarea es simplemente pasar el elemento dentro de myFunction al cambiar el valor del elemento. Usa algo como eso:

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

Entonces ya no necesitaría la identificación del elemento para obtener su valor. Y crea tu myFunction así:

  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);
     };
 };

Consulte el fragmento para obtener más detalles y ayuda:

var btnSubmit = document.getElementById('startSubmit');
		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;
			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);
            };
        };
<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>
0
sagar 9 jul. 2017 a las 05:13

Debes definir la función myFunction() como myFunction = function(){..} En segundo lugar, el atributo id debe ser único. Por lo tanto use

input0.setAttribute('id', 'taskDone'+i); para configurar la identificación y

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

Para llamar a la función.

Del mismo modo, acceda a la identificación como

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

Pruebe el violín: https://jsfiddle.net/djbb79d8/

0
Rajeev Ranjan 9 jul. 2017 a las 04:51