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

【问题标题】：How to get values from dynamically generated DOM input elements Java如何从动态生成的 DOM 输入元素 Java 中获取值
【发布时间】：2017-07-09 04:29:09
【问题描述】：

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

【问题讨论】：

这和Java有什么关系？
它应该是 JavaScript 但我想我没有足够的空间

标签： javascript html for-loop dom

【解决方案1】：

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

myFunction()

您正在尝试获取一个不存在的元素的 ID，因为您使用 id = 'taskdone'+i. 创建了该元素，因此您还必须在 myFunction() 中附加“i”以获取元素 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);
     };
 };

查看 sn-p 了解更多详情和帮助：

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>

【讨论】：

谢谢，昨天我一直在尝试这样做，我花了一整天的时间来解决错误，我知道出了什么问题，但我不知道如何解决它

【解决方案2】：

你需要将函数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/

【讨论】：