can someone tell me what is wrong with this JS alarm

Question

I'm trying to make a simple alarm to practice I think the issue is with the time input, yet I can not detect where is the problem last thing I tried is to slice the innerHTML string match it with if :D is problem with interval or the matching with if I don't know I'm still beginner, thanks in advance

 var dateId = document.getElementById("date") var timeId = document.getElementById("time") var date = new Date(); dateId.innerHTML = date; function myTimer() { var d = new Date(); document.getElementById("time").innerHTML = d.toLocaleTimeString().slice(0, 8); } setInterval(myTimer, 1000); document.getElementById("Stime").addEventListener("input", SetTime); function SetTime() { var input = this.value; console.log(input) return input; } var inputValue = SetTime(); function matchTime() { if (inputValue === timeId.innerHTML) { console.log("Alarm") } } setInterval(matchTime, 1000); console.log(inputValue); //it gives me undefined 

 <div id="date"> </div> <div id="time"> </div> <br> <br> <br> <input id="Stime" type="time" step="1" name="appt-time" value="13:30"> <div id="SLtime"> </div> <div id="SPtime"> </div> 

Answer 1

The first time you run SetTime() right here:

var inputValue = SetTime();

this.value inside SetTime() is undefined, since it is being called by the window. When it is later called as an event on the <input> , it gives you the value you expect. Have the <input> call the function instead and you will get its value.

var stime = document.getElementById("Stime");
var inputValue = SetTime.call(stime);

---

Here's the full snippet:

 var dateId = document.getElementById("date") var timeId = document.getElementById("time") var date = new Date(); dateId.innerHTML = date; function myTimer() { var d = new Date(); document.getElementById("time").innerHTML = d.toLocaleTimeString().slice(0, 8); } setInterval(myTimer, 1000); document.getElementById("Stime").addEventListener("input", SetTime); function SetTime() { var input = this.value; console.log(input) return input; } var stime = document.getElementById("Stime"); var inputValue = SetTime.call(stime); function matchTime() { if (inputValue === timeId.innerHTML) { console.log("Alarm") } } setInterval(matchTime, 1000); console.log(inputValue); //it gives me undefined 

 <div id="date"> </div> <div id="time"> </div> <br> <br> <br> <input id="Stime" type="time" step="1" name="appt-time" value="13:30"> <div id="SLtime"> </div> <div id="SPtime"> </div> 

Answer 2

Actually, when you change the alarm value it's only got the hours and minutes from it until you changed the seconds manually. And we are comparing the timer (which contains hours, minutes and seconds) and alarm value which contains only hours and minutes that's why Alarm is not print.

I just add ":00" for the seconds in the timer and compare its with alarm value.

 var dateId = document.getElementById("date") var timeId = document.getElementById("time") var date = new Date(); var setTime; // used for set the alerm time value. dateId.innerHTML = date; function myTimer() { var d = new Date(); document.getElementById("time").innerHTML = d.toLocaleTimeString().slice(0, 8); } setInterval(myTimer, 1000); document.getElementById("Stime").addEventListener("input", function (evt) { // Add :00 in value for seconds. setTime = this.value.length == 5 ? (this.value+':00') :this.value; // set the setTime (alarm value) }); function matchTime() { // check the alarm value with our timer if (setTime=== timeId.innerHTML) { console.log("Alarm") } } setInterval(matchTime, 1000); console.log(setTime); 

 <div id="date"> </div> <div id="time"> </div> <br> <br> <br> <input id="Stime" type="time" step="1" name="appt-time" value="13:30" min="00:00:00"> <div id="SLtime"> </div> <div id="SPtime"> </div> 

Hope this will help you.