如何引用動態創建的表單域

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