如何引用动态创建的表单域

Question

我的目标是制作一个按钮，为用户输入创建更多字段。 我已经这样做了，但现在需要引用新创建的字段。

目前我只知道如何引用原始的三个字段，因为它们有 ID，但新的没有。

<html>
<body>
<div id="div1" >
Warm From:
<select id="hour_on_1">
    <option value = "0" ></option>
    <option value = "1" >1</option>
    <option value = "2" >2</option>
    <option value = "3" >3</option>
    <option value = "4" >4</option>

</select>
:
<select id="minute_on_1">
    <option value = "" ></option>
    <option value = "0" >00</option>
    <option value = "15" >15</option>
    <option value = "30" >30</option>
    <option value = "45" >45</option>
</select>

<select id="on_am_pm_1">
    <option value = "" ></option>
    <option value = "0" >am</option>
    <option value = "12" >pm</option>
</select>

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Until:
<select id="off_hour_1">
    <option value = "" ></option>
    <option value = "1" >1</option>
    <option value = "2" >2</option>
    <option value = "3" >3</option>
    <option value = "4" >4</option>

</select>
:
<select id="off_minute_1">
    <option value = "" ></option>
    <option value = "0" >00</option>
    <option value = "15" >15</option>
    <option value = "30" >30</option>
    <option value = "45" >45</option>
</select>

<select id="off_am_pm_1">
    <option value = "" ></option>
    <option value = "0" >am</option>
    <option value = "12" >pm</option>
</select>

<br/>
</div>
<div id="div2"></div>
<button type="button" onclick="add_item()">Add Another Period</button>
</body>
</html>


<script type="text/javascript">
function add_item(){
document.getElementById("div2").innerHTML += document.getElementById("div1").innerHTML
}
</script>

我需要能够引用任何字段中的值。

目前我只能去这样的：

hour_on_1_value = parseFloat(document.getElementById("hour_on_1").value.trim())

在左上角的字段中查找值。

希望能够做类似的事情，但对于任何领域

我将不胜感激。

谢谢

Answer 1

 var elementArr=[] function add_item(){ var x=document.createElement('div') var innerStuff=document.getElementById('div1').innerHTML var choiceLocation=document.getElementById('div2') x.innerHTML=innerStuff choiceLocation.appendChild(x) console.log(x) //just for you to see what is stored elementArr.push(x) //this is where the element is stored //each line has a different thing that you can manipulate to your suiting(cuz i cud've made it way shorter) }

 <body> <div id="div1" > Warm From: <select id="hour_on_1"> <option value = "0" ></option> <option value = "1" >1</option> <option value = "2" >2</option> <option value = "3" >3</option> <option value = "4" >4</option> </select> : <select id="minute_on_1"> <option value = "" ></option> <option value = "0" >00</option> <option value = "15" >15</option> <option value = "30" >30</option> <option value = "45" >45</option> </select> <select id="on_am_pm_1"> <option value = "" ></option> <option value = "0" >am</option> <option value = "12" >pm</option> </select> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Until: <select id="off_hour_1"> <option value = "" ></option> <option value = "1" >1</option> <option value = "2" >2</option> <option value = "3" >3</option> <option value = "4" >4</option> </select> : <select id="off_minute_1"> <option value = "" ></option> <option value = "0" >00</option> <option value = "15" >15</option> <option value = "30" >30</option> <option value = "45" >45</option> </select> <select id="off_am_pm_1"> <option value = "" ></option> <option value = "0" >am</option> <option value = "12" >pm</option> </select> <br/> </div> <div id="div2"></div> <button type="button" onclick="add_item()">Add Another Period</button> </body>

如何引用动态创建的表单域

问题描述

1 个解决方案

解决方案1
0 2020-11-08 22:08:43

如何引用动态创建的表单域

问题描述

1 个解决方案

解决方案1 0 2020-11-08 22:08:43

解决方案1
0 2020-11-08 22:08:43