How to match time with input value using setinterval?

Question

0.00/5 (No votes)

See more:

I was creating an alarm clock and I want to match only the time [14:16:29] format with the input value and ring the alarm. I have used the setInterval function but it's not running on a loop on its own. It is only matching when I am pressing the button again and again. Basically, setInterval is not automatically updating the current time and matching the current input value once the button is pressed once. It is only matching when I am pressing the button again and again and the input value is becoming equal to the current time.

 function setAlarm(e) {
        e.preventDefault();
   const alarm = document.getElementById('alarm'); //This is input field
  

     
        const d = new Date();
        let a = d.getHours();
        let b = d.getMinutes();
        let c = d.getSeconds();
        let z = (`${a}:${b}:${c}`)

const myInterval = setInterval(displayHello, 1000);
        function displayHello(e) {
            if (z == alarm.value) {
                console.log("time is valid")
                let failuree = document.getElementById('alarm');
                failuree.classList.add('alert-success');
                 clearInterval(myInterval);
            }


            else {
                let failure = document.getElementById('failure');
                let success = document.getElementById('success');
                 console.log("Invalid time")
                failure.classList.add('show');
            }
        };
    }

What I have tried:

My plan was to use the SetInterval function and when the button is clicked, it will update the time every second automatically and once the current time matches the input value, the SetInterval function should stop and ring the alarm. But it's not functioning that way. What can I do with it?

Posted 10-Feb-22 0:13am

Apoorv 2021

Updated 10-Feb-22 2:02am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2022-02-10T02:02:00

You set the variable z once, when the setAlarm function is called. Each time your displayHello function is called, you are testing the original value of z against the current value of alarm.value. Unless the user initially enters the current time, or updates the alarm input to the current time, that test will never pass.

Cache the value of alarm.value, and move the calculation of z inside the displayHello function.

JavaScript

function setAlarm(e) {
    e.preventDefault();
    
    const alarmTime = document.getElementById('alarm').value;
    const myInterval = setInterval(displayHello, 1000);
    
    function displayHello(){
        const d = new Date();
        const a = d.getHours();
        const b = d.getMinutes();
        const c = d.getSeconds();
        const z = `${a}:${b}:${c}`;
        if (z === alarmTime) {
            console.log("time is valid")
            const failuree = document.getElementById('alarm');
            failuree.classList.add('alert-success');
            clearInterval(myInterval);
        } else {
            console.log("Invalid time")
            const failure = document.getElementById('failure');
            failure.classList.add('show');
        }
    }
}