i want to execute two function as soon as my page load , i have used onload in body tag and windows.onload in script but both are not working.
here is my code
<html>
<head>
<title>(Type a title for your page here)</title>
<script type="text/javascript">
function my_code(){
alert(" Alert inside my_code function");
var text_val = document.getElementById("t2");
text_val.select();
}
window.onload=my_code();
</script>
</head>
<body >
<form name=form1 method=post action=''>
<input type=text name=t1 value=plus2net id="t2">
</form>
</body>
</html>
Substitution or addition to code both are accepted , give some link where i get more information.
thanks in advance
Changing this :
window.onload=my_code();
To this should do it:
window.onload=my_code;
The reason why: my_code() causes the function to be executed. Without () you are passing the function as a reference to the onload event on the window. The onload event when fired will execute the function.
Even better is using the event setter addEventListener. When other code (like jQuery or other libraries) use the window.onload, using addEventListener wouldn't cause the onload event to be overwritten.
window.addEventListener("load", my_code, false); //you need to omit the "on" when assigning with this method.
This is the preferred way.
Related
This is the MCVE of the problem I'm having. Let say I have this very simple test page:
<html>
<header>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
function testMethod(e){
alert(e.target.id);
}
$(document).ready(function(){
$("#btn_test").on("click", testMethod, event);
});
</script>
</header>
<body>
<input type="button" id="btn_test" value="OK" />
</body>
</html>
You can find the jsfiddle here.
In Chrome or IE, when I push the button, the id will be displayed in a message box. But in Firefox since window.event is not defined, I cannot bind testMethod to the button's onclick event.
I know that if I'm writting it inline, I can pass the event like this:
onclick="testMethod(event)"
But how can I pass event to my function in Firefox without writing it inline?
Usually, when you subscribe to an event using on or addEventListener, the event object is passed as a parameter to a callback. You never have to pass it explicitly when you register your callback. So this will do:
$("#btn_test").on("click", testMethod);
The problem with your code on Firefox is that there is no global event property and you get an error:
ReferenceError: event is not defined
and your event subscription never gets registered.
remove the the 3rd parameter it works on firefox.
$("#btn_test").on("click", testMethod);
If you refer to the jQuery Reference here, you'll notice that the third parameter has to be the handler. So, simply remove the third parameter and pass the handler to achieve this.
Check out the demo fiddle here.
<body>
<input type="button" id="btn_test" value="OK" />
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
function testMethod(e){
alert(e.target.id);
}
$(document).ready(function(){
$("#btn_test").on("click", testMethod);
});
</script>
I have written a small program to pop up an alert on click of a button using an addEventListener() . PFB the code below:
html file
<html>
<head>
<title>name alert</title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<input id="p" type="button" value="alert">
</body>
</html>
javascript file
document.getElementById("p").addEventListener("click",greet,true);
function greet(){
alert("hello there !");
}
I dont get a pop up screen this way both the files are in the same folder btw.
test.js loads and executes before the DOM is loaded. So, at that point #p returns null. Try listening to onload event, and add click event.
document.addEventListener("DOMContentLoaded", function(){
document.getElementById("p").addEventListener("click",greet,true);
});
// global scope
function greet(){
alert("hello there !");
}
<input id="p" type="button" value="alert">
try to move your
<script type="text/javascript" src="test.js"></script>
just before
</body>
You need to put the addEventListener inside a function that is called on the load event. As the page is being created it will run the javascript as it comes to it. If it hasn't created the HTML yet, when the addEventListener runs it won't find the 'p' element and it will give you an error.
You can also move the javascript to be after the html, but it's more organized to put it in something like this:
<script type="text/javascript">
window.addEventListener('load', 'function(){pageload()}', false)
function pageload()
{
document.getElementById("p").addEventListener("click",greet,true);
}
</script>
<script type="text/javascript ">
<body onLoad="timeTracker._recordStartTime();">
<body onunload ="timeTracker._recordEndTime(); timeTracker._track(pageTracker);"
</script>
I am trying to use this code to record the time interval between load and unload of a page.
Unfortunately, it does not work. Why?
You may only specify one <body> tag. Also, it's not possible in HTML to specify plain HTML tags inside script tags.
Either add the handler through JavaScript, or merge the attributes in one <body>-tag. JavaScript is case-sensitive, so you should use window.unload (lowercase) instead of window.onLoad.
Use:
<script>
window.onload = function() {
timeTracker._recordStartTime();
};
window.onunload = function() {
timeTracker._recordEndTime();
timeTracker._track(pageTracker);
};
</script>
OR (without <script> tags):
<body onLoad="timeTracker._recordStartTime();" onunload ="timeTracker._recordEndTime(); timeTracker._track(pageTracker);">
i am using this script in my jsp. some time when i click on that particular button it works fine but some time it doesn't work and show Script Error : document.form is null not an object. what ever i searched i found that document is not finished loading when i call reset. how can i check whether the document has loaded or not?
<head>
<script type="text/javascript">
function closeWarning(){
document.forms[0].reset();
}
</script>
</head>
<body onLoad="closeWarning();"
<jsp:include flush="true" page="/myCart/header.jsp"/>
<div>
// content of body
</div>
</body>
If you don't want to use jQuery, you can use an event listener for DOMContentLoaded, as in:
if(document.addEventListener) document.addEventListener("DOMContentLoaded",closeWarning,false);
This will work for everyone except IE, which uses onreadystatechanged, as in:
document.onreadystatechange=function() { if(this.readyState=="complete") { closeWarning();
}
}
One way is using jQuery and it's ready() function.
Here is the best example that I can create. The value of the innerHTML appears in the alert triggered by the onload function. When it hits the document.write, the same innerHTML becomes null. Any ideas on how to get the innerHTML to appear outside the onload function? I've tried global variables and even copying the value to hidden inputs and it still comes up null.
<html>
<head>
<script language='javascript'>
function onload_function() {
alert(document.getElementById("sample_size").innerHTML);
}
document.write("this is a test: " + document.getElementById("sample_size").innerHTML);
</script>
</head>
<body onload='onload_function()'>
<form name='form_test'>
<table border='0' cellpadding='0' cellspacing='0'>
<tr>
<td id='sample_size' style='display:none'>16</td>
</tr>
</table>
</form>
</body>
</html>
You should try adding the script:
<script language='javascript'>
document.write("this is a test: " + document.getElementById("sample_size").innerHTML);
</script>
in the HTML <body> instead of the in <head>. The value/page isn't loaded yet when that javascript is evaluated in the header.
instead of using a global var try putting it into a hidden input element with a unique id so you can get it with the other function using getElementByID
Without the source code, we can't really help you.
There are three possiblities here.
The variable might not actually be global.
Did you declare it with the var keyword inside the function?
The variable might be assigned to undefined elsewhere.
You may have mispelled its name.
Check the DOM tab in Firebug and see whether the variable is there and what its value is.
You can't write to the td's innerHTML outside of onload because the td doesn't yet exist until onload fires.
It works if you put the call to document.write inside your onload function:
<script language='javascript'>
function onload_function() {
alert(document.getElementById("sample_size").innerHTML);
document.write("this is a test: " + document.getElementById("sample_size").innerHTML);
}
</script>