adding input values with time type -html

Question

I have this code, I add two inputs with time type, I try to add them together, this is what I tried I attach below.

Anyone have an idea how to do it, I'll rest on what's below.

   setInterval(function () {
        sum_diff();
    }, 1000);
	
	
function sum_diff() {

       zxc = document.getElementById("id_actual_1").value;
       xcz = document.getElementById("id_actual_2").value; 
       czx= document.getElementById("id_actual_3").value; 

       zxc = zxc.split(":");
       xcz = xcz.split(":");
       czx = czx.split(":");
       
       var zxcDate = new Date(0, 0, 0, zxc[0], zxc[1], 0);
       var xczDate = new Date(0, 0, 0, xcz[0], xcz[1], 0);
       var czxDate = new Date(0, 0, 0, czx[0], czx[1], 0);
       
       var diff = zxcDate.getTime() + xczDate.getTime  + czxDate.getTime;
       	var hours = Math.floor(diff / 1000 / 60 / 60);
        diff -= hours * 1000 * 60 * 60;
       
        var minutes = Math.floor(diff / 1000 / 60);
        
               return (hours < 9 ? "0" : "") + hours + ":" + (minutes < 9 ? "0" : "") + minutes;
 }
 
  setInterval(function () {
        document.getElementById("id_sum_actual").value =  sum_diff();
    }, 1000);

<input type="time" id="id_actual_1" />
<input type="time" id="id_actual_2" />
<input type="time" id="id_actual_3" />
<input type="time" id="id_sum_actual" readonly />

plus how can you loop the code on the javascript side?

Look you have <input type="time" id="id_actual_1" > and you put 01:00 <input type="time" id="id_actual_2" > and you put 02:00 <input type="time" id="id_actual_3" > and you put 03:00 is the expected output 06:00 in <input type="time" id="id_sum_actual" readonly /> ? — Stefan Avramovic
– Stefan Avramovic, Commented Jan 13, 2020 at 7:45

Stefan Avramovic · Accepted Answer · 2020-01-13 10:28:29Z

1

I dont know why you use setInterval, but it is not a good way to watch for events. instead use an eventlistener, se my example below..

Here i convert time to milliseconds and retrive hours and minutes

      function msToTime(duration) {
        var minutes = Math.floor((duration / (1000 * 60)) % 60),
            hours = Math.floor(duration / (1000 * 60 * 60));

        hours = hours < 10 ? "0" + hours : hours;
        minutes = minutes < 10 ? "0" + minutes : minutes;
        

        return hours + ":" + minutes;
      }
      console.log(msToTime(300000));
      function sum_diff() {
        zxc = document.getElementById("id_actual_1").value;
        xcz = document.getElementById("id_actual_2").value;
        czx = document.getElementById("id_actual_3").value;

        zxc = zxc.split(":");
        xcz = xcz.split(":");
        czx = czx.split(":");

        var zxcDate = new Date(0, 0, 0, zxc[0], zxc[1], 0);
        var xczDate = new Date(0, 0, 0, xcz[0], xcz[1], 0);
        var czxDate = new Date(0, 0, 0, czx[0], czx[1], 0);

        var zxcMs =
          zxcDate.getHours() * 60 * 60 * 1000 +
          zxcDate.getMinutes() * 60 * 1000;
        var xczMs =
          xczDate.getHours() * 60 * 60 * 1000 +
          xczDate.getMinutes() * 60 * 1000;
        var czxMs =
          czxDate.getHours() * 60 * 60 * 1000 +
          czxDate.getMinutes() * 60 * 1000;

        var ms = zxcMs + xczMs + czxMs;

        return msToTime(ms);
      }

      var elements = document.getElementsByClassName("time");
      for (var i = 0; i < elements.length; i++) {
        elements[i].addEventListener("change", function(e) {
          document.getElementById("id_sum_actual").value = sum_diff();
        });
      }

<input class="time" type="time" id="id_actual_1" value="00:00" />
<input class="time" type="time" id="id_actual_2" value="00:00" />
<input class="time" type="time" id="id_actual_3" value="00:00" />
    <input type="text" id="id_sum_actual" readonly />

edited Jan 13, 2020 at 10:28

answered Jan 13, 2020 at 8:49

Stefan Avramovic

1,3532 gold badges11 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

ZombieDivision Over a year ago

And how do you make it count down to 200h instead of 24h? (did not count in days only in hours)

Stefan Avramovic Over a year ago

You use type time, if you have 3 input fields type time, max input of 24h you can have max 72h how do you expect to get 200h ? you need to explain what you are trying to achive more clearly.

Stefan Avramovic Over a year ago

for the output just change input id="id_sum_actual" to type="text" and in msToTime() change hours to hours = Math.floor(duration / (1000 * 60 * 60));

ZombieDivision Over a year ago

ultimately I want to have 31 inputs (days) (I want to loop it), I want to give time in hours and minutes, not in days ||| id inputs from "id_actual_1" to "id_actual_31"

Stefan Avramovic Over a year ago

check out the updated code, dose this solve the problem?

|

Collectives™ on Stack Overflow

adding input values with time type -html

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related