Need help fixing setInterval issue in JavaScript

Question

Yesterday, I was informed about setInterval to perform a task or function after a certain number of milliseconds. I have the interval working in my code, but each time it creates a new text line with the date. I want it to replace the previous one after each interval has ended. I tried fixing this by defining the text and date as a variable to be called, but that doesn't work either. Also, for anybody who is interested, here's the link to my question yesterday, which received very helpful responses.

<html>
<head>
<title>Time Stuff Page</title>

</head>
<link href="main.css" rel="stylesheet" type="text/css">
<body>
    <!-- adding color style for demo date buttons via CSS style tag->
<style type="text/css">
    #demo {
        color:red;
         }
    #demo2 {
        color:blue;
        }   
    </style>

<!-- Display date in paragraph -->
<button onclick="getElementById('demo').innerHTML=Date()">The time is? (from innerhtml)</button>
<p id="demo"></p>

<!-- Display date by calling a JS function -->
<button onclick="displayDate()">The time is? (from javascript)</button>
<p id="demo2"></p>

<!-- Display date inside "this" button -->
<button onclick="this.innerHTML=Date()">The time is? (display in button)</button>

<p></p>

<script language="javascript"> 
function displayDate() {
document.getElementById("demo2").innerHTML = Date();
}

var savedate = Date();
document.write("You loaded the page at: "+savedate);

//constantly updated date();
constantDate = function() {
var date = Date();
var timetext = "<br />Updated time is: "+date;
    document.write(timetext);
}

function checkDate() {
setInterval(function(){ constantDate(); }, 10);
}

checkDate();



</script>
</body>
</html>

Don't use document write. – epascarello Jul 25 '15 at 01:47 — epascarello, Jul 25 '15 at 01:47

score 1 · Accepted Answer · answered Jul 25 '15 at 01:23

1

Create similar function to displayDate:

function displayDate2() {
   var timetext = "Updated time is: "+Date();
   document.getElementById("demo3").innerHTML =timetext;
}

You also need to add another paragraph to the body:

<p id="demo3"></p>

answered Jul 25 '15 at 01:23

lukbl

1,763
1
9
13

Oh so as long as the variable is defined with Date() in it, whenever it's called it'll be updated? Sweet! I actually put the other
I needed in the original code above, I think I just forgot about it because I didn't id it as anything. I have another question that doesn't really warrant another post so I'll just ask it here. Why when I tried using a while(0==0) loop to run a loop of the function, it wouldn't load the page? Is this because the loop would go forever? Can't the computer continue displaying the date() forever?
– MrAndrew1337 Jul 25 '15 at 01:26
1

This post: http://stackoverflow.com/a/4575011/5151500 explains quite well why DOM is not updated when some js function is running. – lukbl Jul 25 '15 at 01:38

score 1 · Answer 2 · answered Jul 25 '15 at 01:48

1

The problem is that your JavaScript file is calling the "checkDate()" function as soon as it runs. This means it will run the "constantDate()" function, and this function is using document.write to output the result.

Therefore it will be spamming your document with that output, instead of inserting it in a div. Set it to insert in a div inside the "constantDate()" function like this, and then create the div, and everything should be fine:

constantDate = function() {
    var date = Date();
    var timetext = "<br />Updated time is: "+date;
    document.getElementById("demo3").innerHTML = timetext;
}

And create the div class:

<p id="demo3"></p>

Also, it's usually, like almost always, better to separete your HTML code and JavaScript code, so instead of adding JS code or functions to your "onclick=" property on the button's HTML, add click events in your JS like so:

HTML:
<button id="button2">The time is? (from javascript)</button>

JavaScript:
/* On click event for button 2 */
var button2 = document.getElementById('button2');
button2.onclick = function() {
    displayDate();   
}

Check this JS Fiddle I've done for you: http://jsfiddle.net/filipetedim/t0to0hL8/

answered Jul 25 '15 at 01:48

Ted

580
4
22

Yeah, I had the
tag in the original post, I just didn't id it and forgot to call the id (that wasn't there). Now it works using the setInterval to call the function! As for the adding the id to the button, thank you for that advice! Does this mean I can change what that button does onclick later in JS? I'd assume it'd be the same as just changing the variable or creating a new onclick function. I was testing out id's on other HTML elements and I couldn't find a good source for all of the HTML tags that have access to the id attribute.
– MrAndrew1337 Jul 25 '15 at 02:16
Yes of course. You can pretty much literally do whatever you want in JS that is within the scope of client-side only. – Ted Jul 25 '15 at 02:19
I was going to upload some notes to github that I created myself to help learn about the scoping of variables inside javascript, but I have no clue how to use github correctly on the mac so I'll turn to my old friend pastebin. [Here's the link if you are interested](http://pastebin.com/QNiTREtR) – MrAndrew1337 Jul 25 '15 at 02:27
Might aswell create an account on jsfiddle and it will save your files forever. – Ted Jul 25 '15 at 02:33

Need help fixing setInterval issue in JavaScript

2 Answers2