CODEWITHSUNDEEP
javascripthtmlloops
OwenBall
OwenBall

Reputation: 33

Loop Slowing Down Overtime and Eventually Crashing in Javascipt Running in HTML

I am really new to Javascipt and HTML and I just want to create an updating display of a number. I am hosting the website/running this code with Weebly currently, but I hope to change this as I get better with these languages. The issue I am having currently is that when I run the code directly on my computer it seems to run fine, except the code slows down over time. When I run it in Weebly, on my computer it forces the word milliseconds to a smaller font and otherwise works properly. On an Iphone in safari, I see this (The reason I am changing the color to red is because I eventually want to set it to black because on the IPhone it shows up as gray and I don't want that) Eventually the red text just disappears and the gray text does not update.

Here is the relevant part of the code

  var target = 1578135600000
  var rightnow = 1578135600000 - currdate.getTime()
  var rightnowstr = "(" + rightnow + " milliseconds)"
  var rightnowstr = rightnowstr.fontcolor("black")
  document.write(rightnowstr.fontsize(30))
  document.write("<br>")
  var substring = "until Columbia Invy"
  document.write(substring.fontsize(30))
  var rightnow2
  setInterval(function(){


    currdate = new Date()

    rightnow2 = String(1578135600000 - currdate.getTime())
    rightnow2 = rightnow2.fontcolor("red")
    document.body.innerHTML = document.body.innerHTML.replace(rightnow, rightnow2)
    rightnow = 1578135600000 - currdate.getTime()

   // document.body.innerHTML = document.body.innerHTML.replace(rightnow, rightnow = 1578135600000 - currdate.getTime())

   },1);

I also have a version of the code that works perfect on the computer but on Iphone, the number of milliseconds is gray and does not update.

  var target = 1578135600000
  var rightnow = 1578135600000 - currdate.getTime()
  var rightnowstr = "(" + rightnow + " milliseconds)"
  var rightnowstr = rightnowstr.fontcolor("black")
  document.write(rightnowstr.fontsize(30))
  document.write("<br>")
  var substring = "until Columbia Invy"
  document.write(substring.fontsize(30))
  var rightnow2
  setInterval(function(){


    currdate = new Date()

    document.body.innerHTML = document.body.innerHTML.replace(rightnow, rightnow = 1578135600000 - currdate.getTime())

  },1);

Either way, I just want something that will display black text on both an Iphone (on Safari) and on Chrome that will continuously update the number of milliseconds.

Upvotes: 3

Views: 71

Answers (1)

Jon P
Jon P

Reputation: 19787

Don't use document.write it is very rarely best practice. Set up some sensible HTML on your page and only update the element that needs it. Finally use a sensible number for the refresh.

/* javascript to manipulate the DOM */
var target = 1578135600000
//Get the element that will hold the milliseconds
var countdownElement = document.getElementById("invCountdown");

  setInterval(function(){
    //Date Stuff
    currdate = new Date();    
    rightnow2 = String(target - currdate.getTime());
    //Set the style of the millisecond element
    countdownElement.style.color = "red";
    //Update the content of the millisecond element.
    countdownElement.innerHTML = rightnow2;   
   },16);
/*CSS to style the div with class inv*/
.inv {font-size:30px; color:#000;}
<!-- HTML -->
<!-- Generic block element to hold our content, with a class so we can style it -->
<div class="inv">
<!-- Generic inline element with an id so we can manipulate it easily with javascript -->
  (<span id="invCountdown">1578135600000</span>) milliseconds<br> until Columbia Invy 
</div>

Upvotes: 3

Related Questions