In my document I have an onLoad function given like here in this example:
<body onLoad="display()">
In addition I added a function at the end of the document which changes some CSS properties:
<script>
window.onload = foo(), bar();
</script>
Somehow the whole thing doesn't work! I tried to add all functions at the end of the document but I don't get it, somehow they don't trigger!
That will invoke the functions, but it doesn't assign anything useful to window.onload unless your last function happens to return a function.
You need to assign a function to window.onload that will invoke your functions when the window is ready.
window.onload = function() {
foo();
bar();
};
Plus, since you're putting the script at the bottom, you probably don't need the window.onload.
<script>
foo(); bar();
</script>
</body>
You should also be aware that assigning directly to window.onload will overwrite the script assigned in the <body onLoad=...>, so you shouldn't do both. Currently, the return value of bar(); is wiping out the function that invokes display();.
Getting rid of the window.onload assignment will fix that.
In the first case, I don't see a reason why it shouldn't work, as long as display() is defined function with no errors.
In the second case, when assigning event handlers via DOM, you need to pass either a function reference (i.e. instead of foo() just foo) or wrap it in an anonymous function like so:
window.onload = function() {
foo();
}
Related
I have the code as shown below. Have removed unwanted code from this, just wrote what was needed. When I call my toggleFunc from inline script in body, it shown in console that this function is not defined. Can anyone please tell me whats wrong with this?
<head>
<script src="~/Client/js/lib/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var pageInitialize = function () {
..doing something here
function toggleFunc() {
..doing something more here
};
};
pageInitialize();
});
</script>
</head>
<body>
<script>toggleFunc()</script>
</body>
Both your functions will not be defined until DOMReady has fired, which will happen after the call to toggleFunc in the body has been run. Also, toggleFunc is within the pageInitialize function, and is therefore not accessible outside pageInitialize.
Try this:
<script type="text/javascript">
var pageInitialize = function () {
//..doing something here
};
pageInitialize();
function toggleFunc() {
//..doing something more here
};
</script>
Two problems:
toggleFunc isn't a global function. It's local to pageInitialize. If you want it to be global, assign it to window.
You're defining the function inside a $(document).ready callback, which will execute at some point in the future. You're invoking the function immediately, outside a $(document).ready callback. It won't have been defined yet.
toggleFunc() is a Closure unable to be called from the global scope.
It's also being called before it's even defined as you are using $(document).ready
Functions come up as undefined if I place them in the document.ready() function:
$(document).ready(function(){
function foo()
{
alert('Bar');
}
});
foo(); // Undefined
Why does this happen? I'm sure I'm just in need of some simple understanding :)
Not sure why defining the function with in the scope of ready() is important to you, but you can make it work by declaring foo up front:
<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script>
var foo; // Here's the difference
$(document).ready(function(){
foo = function ()
{
alert('Bar');
}
});
</script></head><body>
<input type="button" onclick="foo()" value="Click me">
</body></html>
Obviously you can't call foo() from the inline script immediately after ready() because the ready() code hasn't yet run, but you can call the function later on.
Just make sure that nothing can try to call foo() before the ready() code has run (or make the initial declaration of foo() a harmless function).
You can but they must be called within the scope of the ready() method otherwise they lose scope when the ready() method exits.
For example, the code below will work:
$(document).ready(function(){
function foo()
{
alert('Bar');
}
foo(); // still in the scope of the ready method
});
They will come up as undefined if you put them in any scope that is not theirs. If you really want to use them outside of the scope of $(document).ready(...) then you need to declare them externally. Such as:
var foo;
$(document).ready(function(){
foo = function()
{
alert('Bar');
}
});
foo(); // works now because it is in scope
Hope this helps.
Your function is defined within the scope of the $(document).ready() callback and cannot be seen from the outside. Either define the function outside the $(document).ready() scope of call it only from within.
Just another addition:
When declaring functions or variables inside of the $(document).ready() function, these are inaccessible when using onclick() binds in the document.
You can either move your declarations outside of $(document).ready(), or you can use $('#element').on('click', function() {}) within `$(document).ready().
<script>
$(document).ready(function(){
myfnc = function (param1, param2)
{
alert('Hello');
}
myfnc();
});
</script>
<input type="button" onclick="myfnc('arg1', 'arg2')" value="Click me">
In the following code, the function writeMessage is called without parenthesis. However it works fine but Is it a correct way of function calling in javaScript or its better to use parenthesis along with writeMessage().
window.onload = writeMessage;
function writeMessage()
{
document.write("Hello World");
}
window.onload = writeMessage; is not a call - it's an assignment. You assign the writeMessage function as the onload field of the window object. The actual call is performed (internally) as window.onload() which is equivalent to writeMessage() in your case.
In the following code, the function writeMessage is called without parenthesis.
Actually, it isn't. The code
window.onload = writeMessage;
does not call the function. It assigns the function to the onload property of window. Part of the process of loading the page in browsers is to fire the function assigned to that property (if any) once the loading process is complete.
If you wrote
window.onload = writeMessage();
what you'd be doing is calling writeMessage and assigning the result of the call to window.onload, just like x = foo();.
Note that the code you've actually quoted, which executes a document.write when the page loads, will wipe out the page that just loaded and replace it with the text "Hello world", because when you call document.write after the page load is complete, it implies document.open, which clears the page. (Try it here; source code here.) In modern web pages and apps, you almost never use document.write, but in the rare cases where you do, it must be in code that runs as the page is being loaded (e.g., not later).
the () is used to EXECUTE the function
when you write
window.onload = writeMessage;
you actually set a delegate ( pointer to a function to be executed) for which - when the onload event will occour.
That's correct already.
You don't need parenthesis because you're just storing the function in window.onload, not calling it yourself.
*Is there a way to call a function defined inside another function in javaSCRIPT? For example:
window.onload() = function() {
function my_function(){
print("Blah");
};
};
function function_two(){
my_function();
};
Is there a way to do something like the above (calling my_function in function_two even though it's defined inside the window.onload() function)? In my actual code, which also uses the raphael.js library, I'm trying to write a button in HTML, which using the onClick function, calls a function(like function_two) that runs the function defined in window.onload() (like my_function). However the console says that the my_function is undefined.
The scope of the function is the core issue here, as Zeychin and Trevor have said. I thought I'd offer another way of handling it. Basically, you can set your function to a variable that's in a higher scope (that is, accessible to both the onload and function_two functions), while defining it inside the onload function as you originally have:
var myFunction; //This is the placeholder which sets the scope
window.onload() = function() {
myFunction = function() { //Assign the function to the myFunction variable
print('blah');
}
}
function function_two() {
myFunction();
}
This might be handy if you only know the information you need for myFunction once you're in the onload event.
You can not do what you are asking to do.
The function my_function()'s scope is only within the anonymous function, function(). It falls out of scope when the method is not executing, so this is not possible.
Trevor's answer is the way to do this.
window.onload = function() {
my_function()
};
function my_function(){
alert("Blah");
};
function function_two(){
my_function();
};
Sorry for asking, but how do I access myFunction() from someFunction()?
<script>
$(document).ready(function() {
// Get messages
var myFunction = function() {
// doSth.
}
// Make the initial call on page load.
myFunction();
);
function someFunction() {
// Call the function a second time
myFunction(); // Call fails!
}
</script>
You are scoping it to the anonymous function you are passing to the ready method. Just move the definition outside that function.
Its more then a scope issue. Yes, you are scoping it to the anonymous function but even if you make it global by removing the var like this:
$(document).ready(function() {
// gets defined AFTER THE DOM IS READY
myFunction = function() {
// doSth.
}
}
// is called BEFORE THE DOM IS READY
myFunction();
It STILL won't work, because myFunction hasn't been defined by the time you call someFunction. someFunction is running immediately before the document is ready, which is BEFORE myFunction is defined.
Both functions need to be either in the document ready block, or outside it. If you need to manipulate DOM elements, I'd recommend inside.
If someFunction is called for a handler, you can remove the var declaration from myFunction and it will work as expected, because this will put myFunction in the global scope.
I don't think this will work because till the dom becomes ready and the document 'ready' event is fired the 'myFunction' function will not be created. The second call to 'myFunction' happens much before the 'myFunction' is created. This case will fail even if you create the function 'myFunction' in global namespace.
If you are not using any closure values inside your 'myFunction', you can move this function to global namespace. This will solve your ploblem.
Ex:
var myFunction = function(){
//Do somthing
}
$(document).ready(function(){
myFunction();
});
myFunction()
I think you wont be able to call myfunction() with your current code. You will have to get that function() { var myfunction = ... }; out of document.ready(). Seperate the method, then you can call myFunction.