Click here to Skip to main content
14,427,400 members
Rate this:
Please Sign up or sign in to vote.
See more:
I have a work time calculation program. <= subtracts departure time to come
I have a problem with JavaScript code. <= I can't loop it properly.

Anyone know how to do this?

I have html code


// ----------------------------------- Day 1
<input type="time" id="1 id_day_start">
<input type="time" id="1 id_day_end">
<input readonly type="time" id="1 id_day_actual">

// ----------------------------------- Day 2
<input type="time" id="2 id_day_start">
<input type="time" id="2 id_day_end">
<input readonly type="time" id="2 id_day_actual">

// (...)

// ----------------------------------- Day 31
<input type="time" id="31 id_day_start">
<input type="time" id="31 id_day_end">
<input readonly type="time" id="31 id_day_actual">

and i have javascipt code (creating variables, getting id, to update time value in each input bar)

"set interval" - to update time every second (1000 is 1 sec interval and function encasing original code you had down here is because `setInterval` only reads functions) You can change how fast the time updates by lowering the time interval


// ----------------------------------- Day 1

     document.getElementById("1 id_day_start").onchange = function () {
        diff_1()
    };
    document.getElementById("1 id_day_end").onchange = function () {
        diff_1()
    };

    function diff_1() {
         start_1 = document.getElementById("1 id_day_start").value; //to update time value in each input bar
         end_1 = document.getElementById("1 id_day_end").value; //to update time value in each input bar

         start_1 = start_1.split(":");
         end_1 = end_1.split(":");
         var startDate = new Date(0, 0, 0, start_1[0], start_1[1], 0);
         var endDate = new Date(0, 0, 0, end_1[0], end_1[1], 0);
         var diff = endDate.getTime() - startDate.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("1 id_day_actual").value = diff_1();
        }, 1000);

// ----------------------------------- Day 2
    
    
    document.getElementById("2 id_day_start").onchange = function () {
        diff_2()
    };
    document.getElementById("2 id_day_end").onchange = function () {
        diff_2()
    };

    function diff_2() {
        start_2 = document.getElementById("2 id_day_start").value; 
        end_2 = document.getElementById("2 id_day_end").value; 
        
        start_2 = start_2.split(":");
        end_2 = end_2.split(":");
        var startDate = new Date(0, 0, 0, start_2[0], start_2[1], 0);
        var endDate = new Date(0, 0, 0, end_2[0], end_2[1], 0);
        var diff = endDate.getTime() - startDate.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("2 id_day_actual").value = diff_2();
     }, 1000); 



   // (...) - up to 31

// ----------------------------------- Day 31 (...)



I have to hang out for each id now and I want to loop it..


I strive for something like this.

What I have tried:

I strive for something like this


    for (i = 0;, i < 31; i++) {



            document.getElementById("_@i id_day_start").onchange = function () {
        diff__@i()
    };
    document.getElementById("_@i id_day_end").onchange = function () {
        diff__@i()
    };
            function diff_@i() {
        start = document.getElementById("@i id_day_start").value;
        end = document.getElementById("@i id_day_end").value;

        start = start.split(":");
        end = end.split(":");
        var startDate = new Date(0, 0, 0, start[0], start[1], 0);
        var endDate = new Date(0, 0, 0, end[0], end[1], 0);
        var diff = endDate.getTime() - startDate.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("_@i id_day_actual").value = diff_@i();
    }, 1000);

    }





I heard I can use eventtarget here, but I have no idea how
Event.target - Web APIs | MDN[^]


thank you very much, but I still have a question, how can I assign this result from this calculation to field name="actual" from 1 to 31?

setInterval(function () {
document.getElementById("@i id_day_actual").value = diff_@i();
}, 1000);


up
Posted
Updated 15-Jan-20 20:39pm
v5

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

// ----------------------------------- Day 1
<input type="time" id="start_1" data-index="1">
<input type="time" id="end_1" data-index="1">
<input readonly type="time" id="actual_1">

// ----------------------------------- Day 2
<input type="time" id="start_2" data-index="2">
<input type="time" id="end_2" data-index="2">
<input readonly type="time" id="actual_2">

// (...)

// ----------------------------------- Day 31
<input type="time" id="start_31" data-index="31">
<input type="time" id="end_31" data-index="31">
<input readonly type="time" id="actual_31">

for (var i = 1; i <= 31; i++) {
  document.getElementById("start_" + i).onchange = diff;
}

function diff(e) {
  var i = e.target.getAttribute("data-index");
  var start = document.getElementById("start_" + i).value;
  var end = document.getElementById("end_" + i).value;

  start = start.split(":");
  end = end.split(":");

  var startDate = new Date(0, 0, 0, start[0], start[1], 0);
  var endDate = new Date(0, 0, 0, end[0], end[1], 0);
  var diff = endDate.getTime() - startDate.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;
}


Pay attention to the meaning of variable with and without var...
   
Comments
Member 14713380 12-Jan-20 7:15am
   
thank you very much, but I still have a question, how can I assign this result from this calculation to field name="actual" from 1 to 31?

setInterval(function () {
document.getElementById("@i id_day_actual").value = diff_@i();
}, 1000);
Member 14713380 14-Jan-20 1:32am
   
up

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




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100