We Keep Coding

Javascript external function from html gives 'function not defined'

I'm trying to call a function within the html page from an external loaded index.js file, but I always get
Uncaught ReferenceError: displayy is not defined
Inside my html page:
<script type="text/javascript" src="index.js"></script>
<script>
$( document ).ready(function() {
displayy();
});
</script>
The index.js file:
$( document ).ready(function() {
alert('loaded');
function displayy() {
alert('executed');
}
});
I've also tried:
<script>
window.onload = function() {
displayy();
};
</script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
displayy();
});
</script>

You need not run displayy again from the script.
The following works:
$(document).ready(function() {
alert('loaded');
displayy();
function displayy() {
alert('executed');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Inside your index.js you can call your function using the window object.
window.displayy = function(){
return "hello!"
}
and then you call it
window.displayy(); or displayy();
A better solution is to declare your function in the higher scope like this:
var displayy;
$( document ).ready(function() {
alert('loaded');
displayy = function () {
alert('executed');
}
});
N.B: Using global variables are bad but it should solve your problem. Please take a look here: I've Heard Global Variables Are Bad, What Alternative Solution Should I Use?

Remove the document.ready wrapper in the .js file.
I ran into this problem, too. I had the call to the function in my main html file inside a document.ready and the external .js file was also wrapping the called function definition inside a document.ready function. Once I removed that wrapper in the .js file, it worked fine. This allowed the functions in the external .js file to become global in scope.

Attach your functions to the window object. Something like this:
// Set the container!
window.app = {};
// Define the function.
window.app.say_hello = function(name) {
alert(`Hello ${name}`);
};
// Call the function.
app.say_hello("Iran");
I tried everything. Only this solution worked. :)

You define the function on DOM ready, and this is useless and wrong.
Use the DOM ready event when you call your function, not when you define it:
Make sure they exist before the DOM is ready, then call them when DOM ready event is received.
So:
function definition -> at start (no need to wrap into event handler)
calling function -> at DOM ready
not the opposite

How to call javascript from Jquery function?

I want to call jquery function in side of java script. My code is:
<script type="text/javascript">
function calljs(){
getUserMail(usermMail);
}
$(function() {
function getUserMail(usermMail) {
***some code*****
}
});
</script>
I got error from browser console:
ReferenceError: getUserMail is not defined.
How to solve this problem?

As far as i understand, the method is not defined when the method is being called. So define it before it is getting called
<script type="text/javascript">
function getUserMail(usermMail) {
***some code*****
}
function calljs(){
getUserMail(usermMail);
}
$(function() {
//
});
</script>
hope it helps

If it is really compulsory to put the function with in the jquery's ready callback (which I don't think is compulsory) use the following way
<script type="text/javascript">
var getUserMail = null;
function calljs(){
if ( null !== getUserMail ) {
getUserMail(usermMail);
}
}
$(function() {
getUserMail = function (usermMail) {
***some code*****
}
});
</script>

You can simply do ,
$(document).ready(function(event) {
getUserMail(usermMail);
});
and define it like ,
function getUserMail(usermMail){
. . .
}
or using jquery ,
$(document).on('click', ".selector", function);
trigger a function on an event

getUserMail is not defined in a scope that is accessible to calljs. This is why you get the ReferenceError; in the context in which you tried to invoke getUserMail there was no function with that name available.
// At this point nothing is defined
function calljs(){
getUserMail(usermMail);
}
// now calljs is defined as a global and can be invoked from anywhere
$(function() { // this line is calling a function named $ (an alias for jQuery)
// and passing it an anonymous function as a parameter.
function getUserMail(usermMail) { // This function is being defined inside
// the scope of the anonymous function,
// it can be used anywhere inside the
// anonymous function but not outside it.
// ***some code*****
}
});
// we are now outside the scope of the anonymous function,
// getUserMail is no longer in our scope and can't be called from here.
The easiest and likely best solution for most situations would be to make sure that any functions that call each other are in the same scope.
From what I can tell you don't really need calljs, you were just trying to use it to poke a hole into the scope of the anonymous function where getUserMail is defined.
Instead you should probably get rid of calljs and move any code that is calling getUserMail inside the ready callback. If getUserMail needs to wait for the ready callback to be fired before you call it, any code that invokes it also should be inside the ready callback too. (Things like event handlers that call it should already be inside the ready callback anyway.)
If there is a reason that you can't move it into the ready callback, such as something in another .js file needs to be able to call it etc, your application might be too complicated to be realistically maintained as jQuery soup. It might be worth the effort to port it to a framework such as Ember or Angular.
Also so you know, there is no need to use the type attribute on your script tags. JavaScript is the only language that has wide support in the browser and all browsers default to using JavaScript for script tags.

Function does not work in Javascript

i have this function in jQuery:
$(document).ready(function(){ function MyFunction() {alert('Hello!');} });
(For example only)
but, i'm want call this function with regular Javscript this way:
if(x == y){MyFunction();}
(For example only)
and i'ts not work.
However, When i try it:
function MyFunction(){alert('Hello!');} if(x == y){MyFunction();}
(Without jQuery function)
it's work.
Why?

if you put the function outside of the .ready() and call it in the ready function it will work, if you put it in the ready() and call it outside of ready it will give you an error you may have a function declared outside of ready state using jQuery code and call it inside.
function MyFunction(){
alert("hello!!");
}
//on ready
$(document).ready(function(){
if(x==y)
MyFunction();
});

I understand your issue like this {but not really clear what you are looking for imho}
Define function:
function MyFunction(){alert('Hello!');}
Call it on document ready:
$(MyFunction);
Now whenever you want, you could use:
if(x == y){MyFunction();}

this line:
if(x == y){MyFunction();}
should also be in the document.ready statement.
if you call it outside it will run before the function was actually defined and thus it will fail.

Lesonchi has it right. The issue is 'scope'.
The $(document).ready(...) call takes a function which is it's own scope (Javascript only has function scoping). So, anything defined inside the function you are passing to that call is ONLY available inside that function.
Based on your question, I assume you wanted to be able to call that MyFunction method elsewhere in the code and not just in the $(document).ready() - so, defining it outside the that call would give it 'global' scope, and hence could be used elsewhere in your code:
function MyFunction(){ /* do something */ }
$(document).ready(function(){
MyFunction(); // call it in this scope
});
// call it in 'global' scope
if (x == y) {
MyFunction();
}
See Also: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope

Calling External function from within function - Javascript

I am using Phonegap and JQueryMobile to create a web application. I'm new to javascript and am having an issue.
My issue is with calling a function I have in a file named "testscript.js", the function is called testFunc. The testscript.js containts only this:
function testFunc() {
console.log("Yes I work");
}
Within my html page I have the following code:
<script>
$('#pageListener').live('pageinit', function(event)
{
testFunc();
});
</script>
The test function is found within my "testscript.js" which I am including with this line within the head tags:
<script src="testscript.js"></script>
The error I get is a "testFunc is not defined".
I am assuming its some type of scope issue as I'm able to call other jquery functions such as:
alert("I work");
and I am able to call my functions by sticking them within script tags in the html elsewhere.
I've tried all sorts of ways of calling my function with no success, any help is appreciated!

You must include the testscript.js before the other jquery code in your html. Like this:
<script src="testscript.js"></script>
<script>
$('#pageListener').live('pageinit', function(event)
{
testFunc();
});
</script>

As long as testscript.js has been loaded by the time PhoneGap fires the pageinit event, and provided the testFunc function is a global, there's no reason that shouldn't work.
You haven't shown us your testFunc, but my guess is that it's not a global, but rather you have it inside something like, for instance:
$('#pageListener').live('pageinit', function(event)
{
function testFunc()
{
// Do something here
}
});
or just a scoping function
(function()
{
function testFunc()
{
// Do something here
}
})();
Either way, since it's declared within another function, it's local to that function, not global. To call it from another script file, you'll need to be able to get at it from the global namespace (sadly). The best way to do that is not to make it a global, but to create just one global that you'll put all of your shared stuff on, like this:
(function()
{
if (!window.MyStuff)
{
window.MyStuff = {};
}
window.MyStuff.testFunc = testFunc;
function testFunc()
{
// Do something here
}
})();
...which you call like this:
$('#pageListener').live('pageinit', function(event)
{
MyStuff.testFunc(); // Or: window.MyStuff.testFunc();
});

Calling a function that's defined inside a function

*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();
};