Click here to Skip to main content
15,883,127 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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


HTML
// ----------------------------------- 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


JavaScript
// ----------------------------------- 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


JavaScript
    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 19:39pm
v5

1 solution

HTML
// ----------------------------------- 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">

JavaScript
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...
 
Share this answer
 
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, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900