Simple javascript for a clock not working - javascript

Hi this is my first javascript and it is not working. The script is programmed to display a clock. The code is as follows:
<html>
<head>
<script type="text/javascript" src="clock.js" > </script>
</head>
<body onload=display_ct();>
<span id='ct' ></span>
</body>
</html>
The javascript is :
function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_ct()',refresh)
}
function display_ct() {
var strcount
var x = new Date()
document.getElementById('ct').innerHTML = x;
tt=display_c();
}
When execute I get a blank screen. What and where is the mistake ?
TIA :)

You should probably be consistent with ending lines in semi-colon. Also, you should check that clock.js is loading; finally put the onload handler in quotes like
function display_c() {
var refresh = 1000; // Refresh rate in milli seconds
mytime = setTimeout('display_ct()', refresh);
}
function display_ct() {
var x = new Date();
document.getElementById('ct').innerHTML = x;
tt = display_c();
}
<html>
<body onload="display_ct();">
<span id='ct'></span>
</body>
</html>

Please enclose your onload attribute value of body tag inside " " .
It should be
<body onload="display_ct();">

Try using setInterval(), also this line won't work in some browsers:
setTimeout('display_ct()',refresh)
var ct;
function display_c() {
//timer block
setInterval(function() {
ct.innerHTML = new Date().toString();
}, 1000); //execute every 1 second
}
function display_ct() {
ct = document.getElementById('ct'); //initialize once.
display_c();
}
<!-- onload, enclosed in quotes -->
<body onload="display_ct()">
<span id='ct'>Loading ...</span>
</body>

You made two errors when entering the display_ct function. You needed to wrap the <body>'s onload event with quotes, and remove the quotes and the parentheses on the setTimeout. See below.
function display_c() {
var refresh = 1000; // Refresh rate in milli seconds
mytime = setTimeout(display_ct, refresh);
}
function display_ct() {
var x = new Date();
document.getElementById('ct').innerHTML = x;
display_c();
}
<html>
<head>
<script type="text/javascript" src="clock.js">
</script>
</head>
<body onload="display_ct()">
<span id='ct'></span>
</body>
</html>

Related

Readable counter time

My script is working well, but the only problem i have.
i want to show the counter in human readable style, becouse now its showing in milliseconds
i want like time left is 1:02 Minutes
so i want to display time left in readable style in browser not milliseconds
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
<p>Time left: <span id="timr"></span></p>
<p id="hpd">Welcome here john</p>
<p id="shp" style="display:none">Your time is up</p>
<input type="button" value="Hi john" id="btn">
<script>
var SessionTime=100000;
var tickDuration=1000;
var myInterval=setInterval(function(){
SessionTime=SessionTime-tickDuration
$("#timr").text(SessionTime);
},1000);
var myTimeOut=setTimeout(SessionExpireEvent,SessionTime);
$("input").click(function(){
clearTimeout(myTimeOut);
SessionTime=100000;
myTimeOut=setTimeout(SessionExpireEvent,SessionTime);
});
function SessionExpireEvent()
{ clearInterval(myInterval);
$("#btn").attr("disabled", true);
$("#hpd").hide();
$("#shp").show();
}
</script>
</body>
</html>
You can simply replace
$("#timr").text(SessionTime);
with
$("#timr").text(`${Math.floor(SessionTime/60000)}:${SessionTime/1000%60}`);
However, your code can be simpler if you don't need to know how much time is left to milliseconds precision.
setInterval and setTimeout are the only functions in your code that need their arguments in milliseconds.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
<p>Time left: <span id="timr"></span></p>
<p id="hpd">Welcome here john</p>
<p id="shp" style="display:none">Your time is up</p>
<input type="button" value="Hi john" id="btn">
<script>
var SessionTimeInSec = 40;
var myInterval = setInterval(function() {
SessionTimeInSec--;
$("#timr").text(`${Math.floor(SessionTimeInSec/60)}:${SessionTimeInSec%60}`);
}, 1000);
var myTimeOut = setTimeout(SessionExpireEvent, SessionTimeInSec*1000);
$("input").click(function() {
clearTimeout(myTimeOut);
SessionTimeInSec = 40;
myTimeOut = setTimeout(SessionExpireEvent, SessionTimeInSec*1000);
});
function SessionExpireEvent() {
clearInterval(myInterval);
$("#btn").attr("disabled", true);
$("#hpd").hide();
$("#shp").show();
}
</script>
</body>
</html>
I did the following changes:
Change SessionTime to SessionTimeInSec and divide numbers by 1000.
Multiple SessionTimeInSec by 1000 for the arguments passed to both funtions setInterval and setTimeout.
Get rid of tickDuration since it will equal to one. Consonantly, change SessionTime = SessionTime - tickDuration to SessionTimeInSec--.
Change $(#timr) text to 0:0 in SessionExpireEvent()
Seems like you want something like this:
var mins = Math.floor(SessionTime / 1000 / 60);
SessionTime %= 60000;
var secs = SessionTime / 1000;
$("#timr").text(mins + ":" + secs);

manipulate portion of a function in HTML using JavaScript

I'm looking for some solution to manipulate a part of HTML body scrip function by injecting some code using tampermonkey on every site load. The purpose of this workaround is to manipulate function behavior. Here's a simple example of what it's going to do:
<html>
<body>...</body>
<script type="text/javascript">...</script>
<script type="text/javascript">
function dosome() {
...
};
function startTimer() {
var countDownTime = 1000 * 60;
...
};
</script>
</html>
For instance in code above, line var countDownTime = 1000 * 60; changes to var countDownTime = 1000 * 45;
You could attempt it by having the parameter be inputted through an input field. See code example below:
<html>
<body>
<input type="number" id="testInput" name="testInput" value="0">
<button type="button" onclick="startTimer()">Submit</button>
<p id="output">Output: </p>
</body>
<script type="text/javascript">
function startTimer() {
var countDownTime = 1000 * document.getElementById("testInput").value;
document.getElementById("output").innerHTML = 'Output: ' + countDownTime;
};
</script>
</html>
You could also make the call from within a button by using the OnClick event.

How to get an inscription from a div?

Hi I wanted to get my inscription "something" and show it on the screen every 2 seconds.
Something doesn't work. Thanks for all help :)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id = "word">something</div>
<script type="text/javascript">
var myVar = document.getElementById("word");
setInterval(function func1(){
document.write(myVar)
},2000);
func1();
</script>
</body>
</html>
Use this
var myVar = document.getElementById("word").innerHTML;
You don't need to run the function manually, setInterval will execute it every 2 seconds.
setInterval(() => {
const word = document.getElementById('word');
const output = document.getElementById('output');
output.innerHTML = word.innerHTML;
}, 2000);
<div id="word">Something</div>
<div id="output"></div>
add innerHTML to extract data from div.
You don't need to name the recurring function.
var myVar = document.getElementById("word").innerHTML;
setInterval(function(){
document.write(myVar);
// alert(myvar);
},2000);
<div id="word">test</div>

javascript for loop going in infinite loop

I made a simple timer in javascript using a for loop, but upon clicking the button to call the function test(), the whole page freezes up so I assume I have an infinite loop somewhere
This is my code:
<html>
<head>
<script>
function test() {
var HowLong = 5;
for (var i=0;i<HowLong;i--) {
document.write(HowLong[i] + "<br>");
}
}
</script>
</head>
<body>
<input type="button" onclick="test()" value="Start Timer">
</body>
</html>
Yes you have infinite loop problem in the for loop:
for (var i=0;i<HowLong;i--)
Instead of i-- try i++
for (var i=0;i<HowLong;i++)
One more thing HowLong is not an array so you can't use HowLong[i], just simply use :
document.write(i+ "<br>");
As #jfriend00 has mentioned in comments When you use document.write() after the document is loaded, it will clear the current document and start a new one. In your case your button Start Timer will be cleared. If you want to avoid it you can use div and add value to it.
<html>
<head>
<script>
function test() {
var HowLong = 5;
for(var i=0;i<HowLong;i++) {
document.getElementById("myDiv").innerHTML += i + "<br>";
}
}
</script>
</head>
<body>
<input type="button" onclick="test()" value="Start Timer">
<div id="myDiv"></div>
</body>
</html>
Try this;
for (var i=0;i<HowLong;i++) {
document.write(i + "<br>");
}
<html>
<head>
<script>
var HowLong = 5;
var isRun = false;
function mf(i){
document.getElementById('myAnchor').innerHTML = i;
}
function rt(i)
{
setTimeout(function(){
mf(i++);
if(i!=HowLong+1)rt(i);
else isRun = false;
}, 1000); // 1000ms = 1sec
}
function test() {
var i = 1;
if(!isRun)
{
isRun = true;
rt(i);
}
}
</script>
</head>
<body>
<div id="myAnchor"></div>
<input type="button" onclick="test()" value="Start Timer">
</body>
</html>
you forget to add delay in your loop

Move javascript clock code from html file to an external .js file

So I have made a clock, it works great. Now I want to move the javascript into an external file and link to it with
<SCRIPT type="text/javascript" language="JavaScript" src="clock.js"
</SCRIPT>
I can not figure out how to keep it updating though. I have tried a few things and the results where: time is static at when the page loads, the prints across the screen for every update, and no time at all.
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
Here's how I would do it. Put this code in your external js file:
function startTime() {
var today=new Date(),
h=today.getHours(),
m=today.getMinutes(),
s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
}
function checkTime(i) {
if (i<10) {
i="0" + i;
}
return i;
}
And then in your main html page, something like this:
<body onload="setInterval(startTime, 500);">
You're missing ending >
<SCRIPT type="text/javascript" language="JavaScript" src="clock.js">
so it should be
<SCRIPT type="text/javascript" language="JavaScript" src="clock.js">
</SCRIPT>

Categories