Question

所以我有这个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>

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

所以我的问题是在函数中当我尝试从生成的DOM元素中获取值时，它将重置页面我想要做的是获取将被放入输入的数字并作为许多新的输入文本框，因为它是键入的数字（它从生成的dom元素中获取数字并创建新的dom元素）

Answer 1

您需要将函数myFunction()定义为myFunction = function(){..} 其次，id属性必须是唯一的。因此使用

input0.setAttribute('id', 'taskDone'+i);设置ID和

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

调用该函数。

同样访问id为

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

尝试小提琴 - https://jsfiddle.net/djbb79d8/

Answer 2

您只是在浪费内存，不能将函数的定义放在循环中。您必须将其放在块之外或单独定义。你应该只在循环中调用函数。但是，在你的

里面

myFunction()

您正在尝试获取一个元素的ID，因为您已使用id = 'taskdone'+i.创建元素，因此您还必须附加“我”。在myFunction（）内部获取元素ID。但我建议你有一个干净的方法来完成这个任务只是在myFunction中传递元素来改变元素值。使用类似的东西：

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

然后您将不再需要元素id来获取其值。并像这样创建你的myFunction：

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

有关详细信息和帮助，请参阅代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

如何从动态生成的DOM输入元素Java中获取值

2 个答案: