i did a simple js within web-app/js/time.js which is
/**
* Created by User on 28-01-2015.
*/
function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
var myVar=setInterval(function(){myTimer()},1000);
and in my gsp i did this to refer this js function
<div id="loginHeader">
<g:javascript src="time.js" id="demo" />
</div>
but it is not showing on my gsp page, however if i put this script in the gsp page it works fine like
<div id="loginHeader">
<p id="demo"></p>
<script>
function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
var myVar=setInterval(function(){myTimer()},1000);
</script>
</div>
i just want put this script into js file and call it from gsp page, so anyone can help me find out whats wrong with it?
I find out the answer see following codes
the js.file
function myTimer() {
var d = new Date();
document.getElementById("demo1").innerHTML = d.toLocaleTimeString();
}
var myVar=setInterval(function(){myTimer()},1000);
the gsp
<div id="loginHeader">
<g:javascript src="time.js" />
<p id="demo1"></p>
</div>
Related
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.
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>
Why prototype function is not called .. when image is clicket?
Html Code :--
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<script type="text/javascript" src="tt.js"></script>
</head>
<body>
<p>This example calls a function which performs a calculation, and returns the result:</p>
<p id="demo"></p>
<input type="image" src="http://t2.gstatic.com/images?q=tbn:ANd9GcSTcJA5J-LOj0HOP1ZMzdSQIsxwuguFdtlesHqzU15W8TXx232pFg" onclick="myFunction('Info clicked')"/>
<script>
var a = new myFunction();
document.getElementById("demo").innerHTML = a.k;
</script>
</body>
</html>
java script :--
function myFunction(l) {
this.k = "hello";
alert(this.k);
var t = this.temp(l);
alert(t);
}
myFunction.prototype.temp = function(a)
{
alert(a);
return 10;
}
If i put inside html page body it works :--
<script>
var a = new myFunction();
document.getElementById("demo").innerHTML = a.k;
</script>
Because you are calling this.temp() on the constructor function and not on an instance of it.
You need to create an instance with new.
new myFunction('Info clicked')
Note that this doesn't make sense. If you want to do things when the constructor runs, you should assign the methods to the constructor and not the prototype.
If you want to stick to your javascript definition, all you need to do to solve this problem is to change the attribute onClick on your html code to new myFunction("...");
<input type="image" src="http://..." onclick="new myFunction('Info clicked')"/>
I want to create a JavaScript clock based on TimeAPI.org.
The reason is I want to make sure the client-side has the exact the same time as the server.
In svclock(json) it saves year/month/day/hour/...etc in vars
but when I'm trying to put those vars in setHours in my clock fucnction
the clock's format becomes like this:
1391670641381:1391670761381:1391670727381
instead of 15:27:06.
Is there an easier way to do this?
<html>
<head>
<script>
var svtime,svyear,svmonth,svdate,svday,svhour,svmin,svsec,newtime;
function svclock(json) {
svtime=new Date(json.dateString);
svyear=String(svtime).substr(11,4);
svmonth=String(svtime).substr(4,3);
svdate=String(svtime).substr(8,2);
svday=String(svtime).substr(0,3);
svhour=String(svtime).substr(16,2);
svmin=String(svtime).substr(19,2);
svsec=String(svtime).substr(22,2);
newtime=svhour+':'+svmin+':'+svsec;
//newtime=svyear+'/'+svmonth+'/'+svdate+'('+svday+')'+' '+svhour+':'+svmin+':'+svsec;
}
function startTime()
{
var today=new Date();
var h=today.setHours(svhour);
var m=today.setMinutes(svmin);
var s=today.setSeconds(svsec);
document.getElementById('clock').innerHTML=h+":"+m+":"+s;
t=setTimeout(function(){startTime()},1000);
}
</script>
<script type="text/javascript" src="http://timeapi.org/gmt/now.json?callback=svclock"></script>
</head>
<body onload="startTime()">
<div id="clock"></div>
</body>
</html>
This question already has an answer here:
dynamically changing HTML tag
(1 answer)
Closed 9 years ago.
I want to display the text from a string into an HTML tag without moving to next page and display it.
<body>
<div>
<label id="lbl1">Label </label>
<button id="btn1" onclick="display()">Click </button>
<script>
function display() {
var str="Hello World";
document.write(str);
}
</script>
</div>
</body>
How do I edit the contents of the label tag?
Common …
document.getElementById('lbl1').innerHTML = str;
function display() {
var str="Hello World";
var label = document.getElementById('lbl1');
label.innerHTML = str;
}
<body>
<div>
<label id="lbl1">Label </label>
<button id="btn1" onclick="display()">Click </button>
<script>
function display() {
var str="Hello World";
var label = document.getElementById("lbl1");
label.innerText = str;
}
</script>
</div>
</body>
When you click the button, the function display() is run, and the label tag's text is changed to "Hello World".
Use document.getElementById("lbl1").innerHTML = display(); and add a return statement inside the function:
function display()
{
var str="Hello World";
return str;
}
You edit the contents in a similar manner: document.getElementById("lbl1").innerHTML = "New content...";.
You could also modify your display() function a little bit to get the desired result:
function display()
{
var str="Hello World";
var label = document.getElementById("lbl1");
label.innerHTML = str;
}
Another way:
window.onload = function()
{
var button = document.getElementById("btn1");
button.onclick = function()
{
document.getElementById("lbl1").innerHTML = "Hello World";
}
}
The last way is the most desired and it's the best to put JavaScript code inside another file and attach it via the src attribute of the script element.
Let's provide a complete example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<label id="lbl1">Label </label>
<button id="btn1">Click </button>
</body>
</html>
Then inside the JavaScript file you just register various events:
//JavaScript
window.onload = function() //You have to ensure that everything has loaded
{
var button = document.getElementById("btn1");
button.onclick = function()
{
document.getElementById("lbl1").innerHTML = "Hello World";
}
}
It's generally considered the best way to register events in a separate JavaScript file because of performance and maintenance simplicity gains. You can read more about it here.