I am trying to accomplish something similar to: Calling a function from one JavaScript file which requires another
Essentially, I have index.php, which is the main file for the home page. Within the index file, I am calling a javascript function from another js file.
<script src="js/data.js"></script>
<script>(go_call())</script>
within data.js:
function go_call(){
alert('working');
}
I get the following error: Uncaught ReferenceError: go_call is not defined
UPDATE 1:
My original code is working fine in IE, but this error I have occurs in google chrome.
A function cannot be called unless it was defined in the same file or one loaded before the attempt to call it.
A function cannot be called unless it is in the same or greater scope then the one trying to call it.
It should work like this:
1) within data.js
function go_call(){
alert('working');
}
2) Within file2.js
function clickedTheButton() {
go_call();
}
3) Html File:
<html>
<head>
</head>
<body>
<button onclick="clickedTheButton()">Click me</button>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript" src="file2.js"></script>
</body>
</html>
Related
Why it is necessary to first include an external js file and call any functiont later on with new script tags ?
I am testing with the code:
test.html
<html>
<head>
</head>
<body>
<script src=test.js>test();</script>
</body>
</html>
test.js
function test(){
alert(1);
}
It does not show an alert popup.
But when I include test.js separately either in body or head with the code:
test.html
<html>
<head>
</head>
<body>
<script src=test.js></script>
<script>test();</script>
</body>
</html>
It does show a pop-up indeed. Does it have anything to do with the HTML parser? I am not even getting a ReferenceError displayed in the browser console so test has a reference but it is not executing.
Code in the global namespace must be loaded in the order such that executed code must first be defined.
For example, if a.js had...
var a = function() {
alert('a');
}
...and b.js had...
a()
...then you wouldn't want to include b.js before a.js, or a() won't be available.
For above,
<script src=test.js></script>
<script>test();</script>
again it is the same way: First include file, then run its contents.
this happens because when you specify a src attribute you told the browser not to look for javascript inside this tag but instead from an external one
Say I have the following:
<body>
<script src='script.js'></script>
<script>myFunction()</script>
</body>
and inside script.js I had the following:
function myFunction() {
// code to run
}
However this is not working for me. and I get the console error that the function is not defined.
I followed this to set up the node.js server: Using node.js as a simple web server
So I installed the serve-static npm.
I then created a file called file called test.html with the following code
<html>
<head>
<h2>Google</h2>
</head>
<body>
<button onclick="test()">Click me</button>
</body>
</html>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript">
function test() {
console.log('test');
}
</script>
When I click on the button, I get:
Uncaught ReferenceError: test is not defined
at HTMLButtonElement.onclick (test.html:8)
and nothing else. This code looks ok...? Why is this function not found?
Remove your src part if you want to have your own function in between your script tags.
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
function test() {
console.log('test');
}
</script>
Also, you should put your scripts before your </body>
Put your javascript just before closing body tag (</body>)
And in your case you are binding event handler in the html itself, in this case you have to define those functions before you use them.
In this case put test() function code in head tag. It will work fine
Your JavaScript (script tag) is outside of html element. Put it in head or body.
I am working with ASP.net and JQuery.
In one Aspx page i have many Js pages included.
Now i added one more Js file(say page1.js) and i was calling a function from page1.js to another js file(page2.js) which was also included in the same Aspx page.
When i tried calling the method(Page1Func) from page2.js i was getting undefined error message.
ASPX Page:
<script src="<%= SomeCommonFunc.GetResolvedUrl("~/Page1.js") %>" type="text/javascript"></script>
<script src="<%= SomeCommonFunc.GetResolvedUrl("~/Page2.js") %>" type="text/javascript"></script>
Page1.js
function page1Func(){
//Some code
}
Page2.js
function page2Func(){
//Some code
page1Func(); // giving undefined error message
}
so i did this:
function page2Func(){
var someFunc = Page1Func; //it worked
someFunc();
}
And it worked.I'm not sure why this message was coming.i have also tried to change the order to include of Js file in ASPX page.
it would be great if someone can help me in explaining this behavior.
P.S : I have checked on internet and didn't get the proper answer for it.
Thanks.
The function could be called as if it was in the same JS File as long as the file containing the definition of the function has being loaded before the first use of the function.
I.e.
File1.js
function alertNumber(number) {
alert(number);
}
File2.js
function alertOne() {
alertNumber("one");
}
HTML
<head>
....
<script src="File1.js" type="text/javascript"></script>
<script src="File2.js" type="text/javascript"></script>
....
</head>
<body>
....
<script type="text/javascript">
alertOne();
</script>
....
</body>
If your code is something like this then there is no chance of giving undefined at all
Here is Plunker implementation
HI i am facing some problem while calling function from index.html on load event
it return error readjson is not defined in console.
index.html
<script type="text/javascript">
$(window).load(function () {
readjson('a','s');
});
</script>
main.js file
<script type="text/javascript">
function readjson(val1,val2){
//some code
}
</script>
Can anyone tell me why it is not able to call, i have link main.js file to index.html
JavaScript files shouldn't include any HTML.
Remove <script type="text/javascript"> and </script> from main.js.
You should see an error when that file is loaded (along the lines of Unexpected token <).
Call it like this inside the js file without the "script" tag :
function readjson(val1,val2){
//some code
}
In index.html you need the "script"
And follow the advice given in the comments, always include first the .js file and then the function in the index.html
Did you add jquery link properly??
If not, you should add jquery link for $(window) to be called. such as..
<script src="http://code.jquery.com/jquery-latest.js"></script>
If you actually have two script declarations as you are showing here the the window load will fire first. It then look for your function, which has not been created yet. That's why you are getting undefined.
You could have one script declaration on the page and place your function in the load function.
<script>
$(window).load(function () {
readjson('a','s');
function readjson(val1,val2){
//some code
}
});
</script>
Remove tags from main.js:
<script type="text/javascript"> and </script>
and remember to include jquery and main.js with:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
<script src="test.js"></script>