Logic of alarm clock is not working in vanilla JavaScript

Question

I'm not able to make the right logic for a simple vanilla javascript alarm clock, that shows a message/plays a sound at the time which user had set... help me make the logic right.

Here's my javascript code:

        <script>
            function setAlarm(){
             //taking value  of time
            var a=document.getElementById("H").value;
            var b=a*3600000;//converted to millisecound
            var c=document.getElementById("M").value;
            var d=c*60000;//converted to millisecound
            var e=d+b;//addition of millisecound
            

             //live values of time
            var f=h*3600000;//converted to millisecound
            var g=m*60000;//converted to millisecound
            var i=g+h;//addition of millisecound

                

                var j=0;
                if(i>=e){
                   j=i-e;
                }else{
                   j=e-i;
                }//else
            document.getElementById("demo2").innerHTML=j;
                setInterval(test,j);
                if (d==g){
                    console.log("if called");
                    test();
                }//if
            }
            function test(){
                console.log("test called")
                document.getElementById("demo2").innerHTML="its work";
            }
            var d=new Date();
               var h=d.getHours();
               document.getElementById("hours").innerHTML=h;
   
               var m=d.getMinutes();
               document.getElementById("minutes").innerHTML=m;
   
               var s=d.getSeconds();
               document.getElementById("secound").innerHTML=s;



            setInterval(repeat,1000);

            function repeat(){
               var d=new Date();
               var h=d.getHours();
               document.getElementById("hours").innerHTML=h;
   
               var m=d.getMinutes();
               document.getElementById("minutes").innerHTML=m;
   
               var s=d.getSeconds();
               document.getElementById("secound").innerHTML=s;
               
            }
            var i=0;
           function ChangeTheam(){
                i++;
                if(i%2){
                    document.body.style.backgroundColor= "black";
                    document.getElementById("hours").innerHTML.style.color = "blue";
                }else{
                    document.body.style.backgroundColor= "white";
                }//else
           }//change theam function
            
        </script>

I can provide HTML code if someone wants but don't think that'll be necessary since I'm not able to make the logic right at the first point.

Thanks :)

Answer 1

In your code

 //live values of time
 var f=h*3600000;//converted to millisecound
 var g=m*60000;//converted to millisecound
 var i=g+h;//addition of millisecound`

You added g+h instead of g+f as a result the time that your alarm takes to trigger may be significantly shorter.

var s=d.getSeconds();
document.getElementById("secound").innerHTML=s;

I am not sure if this is just what you id'd the element by I assume you meant 'second' not 'secound'

Otherwise, I see no problems with your code and should work fine.