how to set setInterval function to update a msg box?

Question

I am currently working on a webpage, what I need to achieve is, when I click on an icon, a message box prompt out , and there is a count down timer on the message box, when I return the count down timer, it only return the value when I trigger it, but I would like to do a live count down timer in the message box , how can I do it??

Here is the JavaScript

function phyTimer3() {
  var minutes1 = Math.floor(timeleft2 / 60);
  var seconds1 = Math.floor(timeleft2 % 60);

  if (timeleft2 > 0) {
    timeleft2 -= 1;
  } else {
    autoRefresh = 1;
    localStorage.setItem("translateX", translate.translateX);
    localStorage.setItem("translateY", translate.translateY);
    localStorage.setItem("scale", scale);
    localStorage.setItem("autoRefresh", autoRefresh);
    localStorage.setItem("zoomLevel", zoomLevel);
    window.location.reload();
  }
  if (seconds1 < 10) {
    seconds1 = "0" + seconds1;
  }
  return ("Global Timer " + minutes1 + " : " + seconds1);
}



if (bs.monitoring_status == 1) {
  if (bs.cooldown_duration == '') {
    var timer1 = document.getElementById('timer2').value;
    monitoringmsg = "Zone:" + bs.zone + " Site:" + bs.site + " Current Monitoring Status is On" +
      "</br>" + "Do you want to turn it <strong>off</strong>?" + "</br>" + "Cooldown Timer : " + phyTimer3();
  } else {
    monitoringmsg = "Zone:" + bs.zone + " Site:" + bs.site + " Current Monitoring Status is On" +
      "</br>" + "Do you want to turn it <strong>off</strong>?"
  }

  $("#manualSwitch").append($("<p/>").attr("id", "monitoringon").attr("title", "Monitoring Status").html(monitoringmsg));
  $("#monitoringon").dialog({

    resizable: false,
    height: "auto",
    width: 400,
    modal: true,
    buttons: {
      'Yes': function() {

        $("#monitoring_zone_id").val(bs.zone);
        $("#monitoring_site_id").val(bs.site);

        $("#actionMonitoring").val('off');
        document.forms["brSwitch"].submit();

        $(this).dialog('close');
      },

      'Cancel': function() {

        $(this).dialog('close');
      }

    }
  });
}

The function phyTimer3 is where I return the minutes and seconds , but obviously this is not working , I am new to programming , I not sure what kind of function is working , can you guys help me on this ??

As your post's title says, have you tried the setInterval() function? It calls a function at specified intervals. Maybe this can help you: https://stackoverflow.com/questions/31106189/create-a-simple-10-second-countdown — Ricky Stefano, Mar 20 '19 at 08:13
Yes , I have tried , but it didn't work , I have called the setInterval() inside the display function , but the whole things just not able to display , I have tried all possible methods, but it doesn't work so I only asked at here.. — Reggie, Mar 20 '19 at 08:16
for the post u post, it will work because it keep on calling on setInterval() function on every 1000 miliseconds and it update the document.getElementById , but for my case the text is display inside a function which I use jQuery.append() method to append the text , what I can achieved is just return when the user clicked on it. But I would like to do a live count down. — Reggie, Mar 20 '19 at 08:19
Is your setInterval() function working with updating DOM.innerHTML? If yes, you can solve the problem with: append the timer, check if the the element with id #monitoringon exist, update the timer itself (this requires you to add extra html element with a specific id e.g. ). — Ricky Stefano, Mar 20 '19 at 08:48
yes my setInterval() function is working with updating DOM.innerHTML , i am using it on other place too , you mean instead of replacing the whole #monitoringon I can just append it ?? Can you show me some example on this ? — Reggie, Mar 21 '19 at 00:49
@RickyStefano I just tried it , but it just keep on appending my nodes , it doesn't change the timer. — Reggie, Mar 21 '19 at 00:55

how to set setInterval function to update a msg box?

0 Answers0