使用javascript中动态生成的输入元素的javascript中的多个闹钟

我正在尝试制作一个网页，允许使用javascript的动态元素创建属性设置多个警报，但我无法获取这些多个元素的值，并在那个时候创建警报。 这是到目前为止我的代码

<div id="TextBoxContainer">
     <!--Textboxes will be added here -->
</div>
<br />
<input id="btnAdd" type="button" value="add" onclick="AddTextBox();" />

<script type="text/javascript">
        var room = 0;
        var i = 0;
        function GetDynamicTextBox(){
            return '<div>Alarm ' + room +':</div><input type="number"style="text-align:center;margin:auto;padding:0px;width:200px;" min="0" max="23" placeholder="hour" id="a'+room+'" /><input type="number" min="0" max="59" placeholder="minute" style="text-align:center; padding:0px; margin:auto; width:200px;" id="b'+room+'" /><input type="date" style="margin:auto;text-align:center; width:200px; padding:10px"><input type="button" value ="Set" onclick = "AddAlarm('+room+');" /> <input type="button" value ="Remove" onclick = "RemoveTextBox(this)" />';
        }
        function AddTextBox() {
            var div = document.createElement('DIV');
            div.innerHTML = GetDynamicTextBox("");
            document.getElementById("TextBoxContainer").appendChild(div);
        }

        function RemoveTextBox(div) {
            document.getElementById("TextBoxContainer").removeChild(div.parentNode);
        }

        function RecreateDynamicTextboxes() {
                var html = "";
                html += "<div>" + GetDynamicTextBox() + "</div>";
                document.getElementById("TextBoxContainer").innerHTML = html;
                room++;
        }
        window.onload = RecreateDynamicTextboxes;

        function AddAlarm(values){
            var hour = document.getElementById('');
            var minute = document.getElementById('');
            var date = document.getElementById('');
        }
</script>

var房间=0；
var i=0；
函数GetDynamicTextBox（）{
返回“报警”+房间+：'；
}
函数AddTextBox（）{
var div=document.createElement（'div'）；
div.innerHTML=GetDynamicTextBox（“”）；
document.getElementById（“TextBoxContainer”）.appendChild（div）；
}
函数RemoveTextBox（div）{
document.getElementById（“TextBoxContainer”）.removeChild（div.parentNode）；
}
函数重新创建DynamicTextBox（）{
var html=“”；
html++=“GetDynamicTextBox（）+”；
document.getElementById（“TextBoxContainer”）.innerHTML=html；
房间++；
}
window.onload=重新创建DynamicTextBox；
函数AddAlarm（值）{
var hour=document.getElementById（“”）；
var minute=document.getElementById（“”）；
变量日期=document.getElementById（“”）；
}

您忘记了日期输入上的ID属性，您正在AddAlarm中收集输入元素，而不是它们的值

编辑：要检查报警，您必须存储它们，并每分钟检查一次，如果当前日期与其中一个报警匹配。我在那里添加了一个简短的实现

变量报警={}；
var房间=0；
var i=0；
setInterval（函数（）{
var current=新日期（）；
用于（报警中的var nr）{
var报警=报警[nr]；
控制台日志（“检查报警”+nr+”（“+alarm+”））；
if（current.getHours（）==alarm.getHours（）
&¤t.getMinutes（）==alarm.getMinutes（））{//还检查日期、月份和年份
警报（“警报\n”+警报）；
}否则{
console.log（'报警'+nr+'（'+Alarm+'）与当前日期'+current'不匹配）；
}
}
}, 60000);
函数GetDynamicTextBox（）{
返回“报警”+房间+：'；
}
函数AddTextBox（）{
var div=document.createElement（'div'）；
div.innerHTML=GetDynamicTextBox（“”）；
document.getElementById（“TextBoxContainer”）.appendChild（div）；
}
函数RemoveTextBox（div）{
document.getElementById（“TextBoxContainer”）.removeChild（div.parentNode）；
}
函数重新创建DynamicTextBox（）{
var html=“”；
html++=“GetDynamicTextBox（）+”；
document.getElementById（“TextBoxContainer”）.innerHTML=html；
房间++；
}
window.onload=重新创建DynamicTextBox；
函数AddAlarm（值）{
var hour=$（'#a'+值）.val（）；
var minute=$（'#b'+值）.val（）；
变量日期=$（'#c'+值）.val（）；
日志（小时+：“+分钟+”，在“+日期”；
var dateObj=新日期（日期）；
dateObj.setMinutes（分钟）；
dateObj.设定小时数（小时）；
console.log（dateObj）；
报警[值]=日期对象；
}

到目前为止，我能够在值与系统时间匹配时生成警报，但我不知道在删除元素时如何删除数组值。我做不到。这是我目前的代码：

<script type="text/javascript">

        var snd = new Audio("clock.mp3"); // buffers automatically when created
        // Get
        if (localStorage.getItem("test")) {
            data = JSON.parse(localStorage.getItem("test"));
        } else {
            // No data, start with an empty array
            data = [];
        }

        var today = new Date();
        var d = today.getDay();
        var h = today.getHours();
        var m = today.getMinutes();
        //since page reloads then we will just check it first for the data
        function check() {
        //current system values
        console.log("inside check");
        //if time found in the array the create a alert and delete that array object
        for(var i = 0; i < data.length; i++) {
            var today = new Date();
            var d = today.getDay();
            var h = today.getHours();
            var m = today.getMinutes();

            if (data[i].hours == h && data[i].minutes == m && data[i].dates == d ) {
                data.splice(i,1);
                localStorage["test"] = JSON.stringify(data);
                snd.play();
                alert("Wake Up Man ! Alarm is over ");
                }
            }
            if((data.length)>0)
            {
                setTimeout(check, 1000);
            }

        }
        //we do not want to run the loop everytime so we will use day to check
        for(var i =0 ; i< data.length; i++)
        {
            if((data[i].dates == d) && (data[i].hours >= h) && (data[i].minutes >= m) )
            {
                check();
            }
        }

        console.log(data);


        var room = 1;
        //var data = [];
        var i = 0;
        function GetDynamicTextBox(){

            var date = new Date();
            var h = date.getHours();
            var m = date.getMinutes();
            var d = date.getDay();

            return '<div>Alarm ' + room +':</div><input type="number" style="text-align:center;margin:auto;padding:0px;width:200px;" min="0" max="23" value ='+h+' placeholder="hour" id="a'+room+'" /> <input type="number" min="0" max="59" placeholder="minute" style="text-align:center; padding:0px; margin:auto; width:200px;" id="b'+room+'" value ='+m+' /> <select id="c'+room+'" style="margin:auto; width:150px; padding:10px; color: black" required> <option value="1">Monday</option> <option value="2">Tuesday</option> <option value="3">Wednesday</option> <option value="4">Thursday</option> <option value="5">Friday</option> <option value="6">Saturday</option> <option value="0">Sunday</option> </select> <input type="button" value ="Set" onclick = "AddAlarm('+room+');" /> <input type="button" value ="Remove" onclick = "RemoveTextBox(this)" />';
        }
        function AddTextBox() {
            room++;
            var div = document.createElement('DIV');
            div.innerHTML = GetDynamicTextBox("");
            document.getElementById("TextBoxContainer").appendChild(div);
        }

        function RemoveTextBox(div) {
            document.getElementById("TextBoxContainer").removeChild(div.parentNode);
        }

        function RecreateDynamicTextboxes() {
                var html = "";
                html += "<div>" + GetDynamicTextBox() + "</div>";
                document.getElementById("TextBoxContainer").innerHTML = html;
        }
        window.onload = RecreateDynamicTextboxes;

        function AddAlarm(values){
            var hour = $('#a'+values).val();
            var minute = $('#b'+values).val();
            var date = $('#c'+values).val();

            //get the current time and date
            var today = new Date();

            //current system values
            var d = today.getDay();
            var h = today.getHours();
            var m = today.getMinutes();

            //first check that whether a same date present in the array or not then push it
            var found = -1;
            for(var i = 0; i < data.length; i++) {
                if (data[i].hours == hour && data[i].minutes == minute && data[i].dates == date ) {
                    found = 0;
                    break;
                }
            }

            //if value does not present then push it into the array
            if(found == -1)
            {
                data.push({hours: hour, minutes: minute, dates: date});
                //storing it into localstorage
                localStorage.setItem("test", JSON.stringify(data));
            }
            else
            {
                alert("Same value Exists");
            }

            //console.log(data);

            function check() {
                //current system values
                //console.log("inside check");
                //if time found in the array the create a alert and delete that array object
                for(var i = 0; i < data.length; i++) {
                    var today = new Date();
                    var d = today.getDay();
                    var h = today.getHours();
                    var m = today.getMinutes();

                    if (data[i].hours == h && data[i].minutes == m && data[i].dates == d ) {
                        data.splice(i,1);
                        snd.play();
                        alert("Wake Up Man ! Alarm is over ");
                    }
                }
                if((data.length)>0)
                {
                    setTimeout(check, 1000);
                }

            }
            //we do not want to run the loop everytime so we will use day to check
            for(var i =0 ; i< data.length; i++)
            {
                if((data[i].dates == d) && (data[i].hours >= h) && (data[i].minutes >= m))
                {
                    check();
                }
            }
        }



        </script>

var snd=新音频（“clock.mp3”）；//创建缓冲区时自动执行
//得到
if（localStorage.getItem（“测试”））{
data=JSON.parse（localStorage.getItem（“test”）；
}否则{
//无数据，从空数组开始
数据=[]；
}
var today=新日期（）；
var d=today.getDay（）；
var h=today.getHours（）；
var m=today.getMinutes（）；
//因为页面重新加载，所以我们将首先检查它的数据
函数检查（）{
//当前系统值
控制台日志（“内部检查”）；
//如果在数组中找到时间，则创建警报并删除该数组对象
对于（变量i=0；i0）
{
设置超时（检查，1000）；
}
}
//我们不希望每次都运行循环，所以我们将使用day进行检查
对于（变量i=0；i=h）和&（数据[i].分钟>=m））
{
检查（）；
}
}
控制台日志（数据）；
var房间=1；
//var数据=[]；
var i=0；
函数GetDynamicTextBox（）{
变量日期=新日期（）；
var h=date.getHours（）；
var m=date.getMinutes（）；
var d=date.getDay（）；
返回“报警”+房间+”：周一-周二-周四-周六-周日”；
}
函数AddTextBox（）{
房间++；
var div=document.createElement（'div'）；
div.innerHTML=GetDynamicTextBox（“”）；
document.getElementById（“TextBoxContainer”）.appendChild（div）；
}
函数RemoveTextBox（div）{
document.getElementById（“文本
var alarmDate = new Date();
alarmDate.setHours(7);
alarmDate.setMinutes(15);
// set day, month, year, etc.

var ONE_SECOND = 1000; // miliseconds

var alarmClock = setInterval(function() {
    var currentDate = new Date();

    if (currentDate.getHours() == alarmDate.getHours() &&
             currentDate.getMinutes() == alarmDate.getMinutes() 
      /* compare other fields at your convenience */ ) {
        alert('Alarm triggered at ' + currentDate);
        // better use something better than alert for that?

}, ONE_SECOND);