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>
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>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments