Javascript 将html按钮分配到正确的字段
我无法将新创建的按钮链接到正确的输入字段。 我对我的“添加另一个”按钮很满意,对第一个“添加”按钮也很满意。 但是,第二个“添加”按钮添加到第一组字段中,这不是我想要的。基本上我现在有两个相同的按钮Javascript 将html按钮分配到正确的字段,javascript,html,Javascript,Html,我无法将新创建的按钮链接到正确的输入字段。 我对我的“添加另一个”按钮很满意,对第一个“添加”按钮也很满意。 但是,第二个“添加”按钮添加到第一组字段中,这不是我想要的。基本上我现在有两个相同的按钮 <style> .inline{ display: inline-block; } </style> <div id = "r1"> <label for
<style>
.inline{
display: inline-block;
}
</style>
<div id = "r1">
<label for = "hour_on" >From:</label>
<span style="display:inline-block; width:150px"></span>
<label for = "hour_off" >Until:</label>
<br>
<div class = "times_1" style = "display:inline-block">
<select class = "hour_on" style = "width:105px">
<option value = "0" ></option>
<option value = "1" >1:00</option>
<option value = "1.25" >1:15</option>
<option value = "1.5" >1:30</option>
<option value = "1.75" >1:45</option>
<option value = "2" >2:00</option>
<option value = "2.25" >2:15</option>
<option value = "2.5" >2:30</option>
<option value = "2.75" >2:45</option>
<option value = "3" >3:00</option>
<option value = "3.25" >3:15</option>
<option value = "3.5" >3:30</option>
<option value = "3.75" >3:45</option>
<option value = "4" >4:00</option>
</select>
<select class = "am_pm_on">
<option value = "0" ></option>
<option value = "0" >am</option>
<option value = "12" >pm</option>
</select>
<span style="display:inline-block; width:40px"></span>
<select class = "hour_off" style = "width:105px">
<option value = "0" ></option>
<option value = "1" >1:00</option>
<option value = "1.25" >1:15</option>
<option value = "1.5" >1:30</option>
<option value = "1.75" >1:45</option>
<option value = "2" >2:00</option>
<option value = "2.25" >2:15</option>
<option value = "2.5" >2:30</option>
<option value = "2.75" >2:45</option>
<option value = "3" >3:00</option>
<option value = "3.25" >3:15</option>
<option value = "3.5" >3:30</option>
<option value = "3.75" >3:45</option>
<option value = "4" >4:00</option>
</select>
<select class = "am_pm_off">
<option value = "0" ></option>
<option value = "0" >am</option>
<option value = "12" >pm</option>
</select>
  
</div>
<div id = "add_remove_buttons" class = "inline">
<button type="button" onclick="add_item()" class = "inline" >Add</button>
</div>
<div class = "new_times">
</div>
<br>
<div class = "new_room">
</div>
</div>
<div id = "add_room_button">
<button type="button" onclick="add_room()" >Add Another</button>
</div>
<script>
var clicks_1 = 0
var update_1 = 1
function add_item() {
if (clicks_1 < 2) {
clicks_1 += 1
update_1 += 1
var x=document.createElement('div')
var innerStuff=document.getElementsByClassName('times_'+clicks_1)[0].innerHTML
var choiceLocation=document.getElementById("r1").getElementsByClassName("new_times")[0]
x.innerHTML=innerStuff
x.setAttribute("class", "times_"+update_1)
choiceLocation.appendChild(x)
}
}
var room_clicks = 0
var room_update = 1
function add_room() {
if (room_clicks < 10) {
room_clicks += 1
room_update += 1
var x1=document.createElement('div')
var innerStuff=document.getElementById('r'+room_clicks).innerHTML
var choiceLocation=document.getElementById('r'+room_clicks).getElementsByClassName("new_room")[0]
x1.innerHTML=innerStuff
x1.setAttribute("id", 'r'+room_update)
choiceLocation.appendChild(x1)
}
}
</script>
到
但我还有一个相反的问题
我怀疑我必须引用我正在单击的按钮的父div id,以便在正确的空间中生成新字段。但经过一些研究,我仍然不确定如何做到这一点
谢谢你的帮助
谢谢
var choiceLocation=document.getElementById("r1").getElementsByClassName("new_times")[0]
var choiceLocation=document.getElementById("r"+room_update).getElementsByClassName("new_times")[0]