Show a running clock in html object

[oli]

I have an issue with updating a value within a html object continously.
I want to show a clock (in a html object) which is updated every second after I pressed a specific button on the form.

Therefore I added following custom code to the button (onclick event):

Code: Select all

setTimeout(function(){
    var zeit;
    var stunden, minuten, sekunden;
    var StundenZahl, MinutenZahl, SekundenZahl;
    var heute;
    heute = new Date();
    StundenZahl = heute.getHours();
    MinutenZahl = heute.getMinutes();
    SekundenZahl = heute.getSeconds();
    stunden = StundenZahl+":";
    if (MinutenZahl < 10) {minuten = "0" + MinutenZahl + ":";}
          else {minuten = MinutenZahl + ":";}
     if (SekundenZahl < 10) {sekunden = "0" + SekundenZahl + " ";}
          else {sekunden = SekundenZahl + " ";}
     zeit = stunden + minuten + sekunden + " Uhr";     
     document.getElementById('div_time').innerHTML = zeit;       // write the current time into the DIV of the html object on the form
},1000);

The correct time is visible in the DIV of my HTML object - but unfortunately only once (and static) and it never will be updated.
I think I'm doing something fundamentally wrong here and hope that someone could help me out please.

Thanks and best regards,
Oli

[kev1n]

Use setInterval():

Code: Select all

 function updateClock() { 
      let currentDate = new Date(); 
      time = currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds();
      document.getElementById("div_time").innerHTML = time + ' Uhr';	  
    }
	
 setInterval(updateClock, 1000);

[oli]

Thanks kev1n!
This is working great.

I just have one more issue.
Since some variables are counting the time within my function to calculate the current amount of money I'm facing another issue now.

When I pressed the button to start the calculation the 1st time - all works fine and the calculated amount of money will be showed correctly.
If I stop the calculation and start it again the values are switching and it seems the previous values of all variables will used together with the new ones (like the function is running twice).
Only if I restart the browser (or refresh it) it works as expected (until I don't start it again).
I hope I could explain the issue.
Please find below the complete code of the function

Code: Select all

function updateClock() {
    if($('#tas_running').prop('checked') === true){     
      let timestamp = Date.now();
      let time = timestamp - inittime; //currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds();
      let time_dif_hrs = Math.floor(time / 1000 / 60 / 60);   
      let betrag_running = ((time / 1000 / 60 / 60) * parseFloat(costrate)) + parseFloat(betrag);
      betrag_running = betrag_running.toFixed(2);
      // calc minutes
      if(time_dif_hrs > 0){
        time_dif_min = Math.floor((time / 1000 / 60) - (time_dif_hrs * 60)); 
      }else{
        time_dif_min = Math.floor(time / 1000 / 60);  // Minuten Differenz 
        // nuMessage(time_dif_hrs + ' - ' + time_dif_min);
      }
      // calc seconds
      let time_dif_sec = 0;
      if(time_dif_hrs > 0 && time_dif_min > 0){
        time_dif_sec = Math.floor((time / 1000) - (time_dif_min * 60) - (time_dif_hrs * 3600));    
      }else if(time_dif_hrs < 1 && time_dif_min > 0){
        time_dif_sec = Math.floor((time / 1000) - (time_dif_min * 60));         
      }else if(time_dif_hrs > 0 && time_dif_min < 1){
        time_dif_sec = Math.floor((time / 1000) - (time_dif_hrs * 3660));           
      }else if(time_dif_hrs < 1 && time_dif_min < 1){
        time_dif_sec = Math.floor((time / 1000));  
      } 
      // document.getElementById("div_time").innerHTML = Math.floor(time_dif_min) + ' - Time =' + Math.floor(time / 1000);
      document.getElementById("div_time").innerHTML = 'Zeit: ' + Math.floor(time_dif_hrs) + ':' + Math.floor(time_dif_min) + ':' + Math.floor(time_dif_sec); 
      document.getElementById('div_betrag').innerHTML = 'Gesamtbetrag: ' + betrag_running + '€';
    }
}
setInterval(updateClock, 1000);