Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/81.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 将html按钮分配到正确的字段_Javascript_Html - Fatal编程技术网

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

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