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>

`var input = this.value;` what do you expect `this` to be here? — VLAZ, Sep 17 '19 at 06:31
In that case when you call `var inputValue = SetTime();` the `this` context will not be set to the input. [More information](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — VLAZ, Sep 17 '19 at 06:43

Liftoff · Answer 1 · 2019-09-17T06:43:07.520

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>

it still does not alarm ```console.log(alarm)``` I can not find the problem — Khaled Mahmoud, Sep 17 '19 at 07:29

score 0 · Answer 2 · answered Sep 17 '19 at 07:14

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.

thank you but still it not the problem, still does not alarm, I don't see where is the problem — Khaled Mahmoud, Sep 17 '19 at 09:45
@KhaledMahmoud, I am able to set the alarm and its show the "Alarm" to me. where you are getting the error. — Pulkit Aggarwal, Sep 17 '19 at 10:28
Your code is not working because of two reasons, first one is the scope of "this" and the second one is we are getting the hours and minutes only like "13:20" until you change the seconds. — Pulkit Aggarwal, Sep 17 '19 at 10:30

can someone tell me what is wrong with this JS alarm

2 Answers2