我的 JavaScript Function 是不计算小时数

Question

This is My JavaScript code

    function date(){
    var starth = document.getElementById("stime").vlue;
    
    var endh= document.getElementById("etime").value;  
    var duration = parseFloat(endh) - parseFloat(starth);
    var noOfDays = Math.floor(duration / (1000*60*60*24));
    var noOfHours = Math.floor(duration % (1000*60*60*24) / (1000*60*60));
    var noOfMinutes = Math.floor(duration % (1000*60*60) / (1000*60));
    var noOfSeconds = Math.floor(duration % (1000*60) / 1000);

    
    document.getElementById("tlecture").value =  noOfHours + "hours" + noOfMinutes + "minutes" + noOfSeconds + "seconds";
   
}

This is My Form

 <form class="form-inline" method="post">
          
                <div class="form-group">
                    <label for="name">Lecture Name: </label> <br>
                    <br> <input type="text" id="search-box" name="search-box"  size="60"   />
                    <div id="suggesstion-box" align="center" ></div>

                </div>
                <br><br>
                <div class="form-group">
                    <label for="cname">Course Name: </label></br>
                    <br> <input type="text" id="search-box_2"  name="search-box_2" required placeholder="Search By Name..." size="60"  />
                    <div id="suggesstion-box_2" align="center"></div>

                </div>
                <div class="form-group">
                    <label for="stime">Start Time: </label></br>
                    <br> <input type="time" id="status" name="stime"  size="60"  required="true" />
                    <label for="etime">End Time: </label></br>
                    <br> <input type="time" id="etime" name="etime"  size="60"  required="true" />
            

                </div>
                
                <div class="form-group">
                    <label for="cname">Total Lecture : </label></br>
                  
                    <br> <input type="text" id="tlecture"  name="tlecture"  size="60"  />
               
                    <button  class="btn btn-primary" name="submit"  onclick="date()"> Calculate</button>

                </div>
            
                <button type="submit" class="btn btn-primary" name="submit" style=" position: absolute; bottom: 62%;"> Submit </button>

            </form>

My Javascript function is not working. When I click the calculate button, I want to get the total hours the lecture has worked. The lecture can enter the start time and end time from the form. I wrote a function to calculate the total hours but it's not working. I try to debug via console but nothing showed in the console. Can someone help me out? I want to enter the start time and end time after that I want to calculate the total hours.

Answer 1

<script>
   function date(){
            p = "1/1/1970 ";
            var starth = document.getElementById("stime").value;
            var endh= document.getElementById("etime").value;
           var difference = new Date(new Date(p+endh) - new Date(p+starth)).toUTCString().split(" ")[4];
            document.getElementById("tlecture").value =  difference;


        }
</script>

Here is the answer for my question. This is the correct calculation