This is a newbie question. I have two javascript and one html files. When I click on an image it goes to the first .js file and when it finnish to run all that code should go to the second .js file. But how can I connect the two functions that are in different files.
thanks
you need just to define the 2 js files in the HTML header page :
<script type="text/javascript" src="one.js"></script>
<script type="text/javascript" src="second.js"></script>
It doesn't matter what files the functions are in, you can call the second function from the first one.
You should also consider why you are separateing your functions into seperate files - in general, they should all be in as few files as possible.
Like so:
In file1.js:
var foo = function(){
bar();
};
In file2.js:
var bar = function(){
alert('hello');
};
You will have something like this,
in the html file:
<input type="button" name="" onclick="random1();" />
in the first js file:
function random1(){
// your code here
random2();
}
in the second js file:
function random2(){
//your code here
}
Related
I hava many jsp page using the common function in body's onload and onunload event when using ocx control.So I extract the common function in one js file call common.js and import the js file in the jsp page.But I find the sometimes the jsp page could not execute the function in js file.Finally,I solve the problem in two way but I think there must have the other simple way?How to simplify my js code?
write all the js function in each jsp,it works well
in the each jsp file,includ the common.js,and in the jsp file the script call the function before load the common.js,but I think it have already be loaded two times
//init(),asynclogin_onclick(),logout_onclick() function is in the common.js file
<head>
<script type="text/javascript" src="/js/common.js"></script>
</head>
<body onload="init()" onunload="logout_onclick()">
$(function(){
$.getScript("/js/common.js")
.done(function(script,textStatus ) {
asynclogin_onclick();
});
});
I try to write the code like this,but it could not work.
$(function(){
asynclogin_onclick();
});
In C I'm accustomed to do something like:
//MyHeaderFile.h
#define MY_CONSTANT 34
//MyMainFile.c
#include MyHeaderFile.h
int num = MY_CONSTANT;
I want do something in an html document like:
//MyJS.js
#define MY_SCRIPT <script>some javascript stuff </script>
//MyHTML.html
<html>
MY_SCRIPT
</html>
This html would execute whatever script code was defined as MY_SCRIPT. Basically What I want is to have multiple .html files reference the javascript code, all of them executing the same code defined in the .js file. It would just be nice to be able to change the code in the .js file once and have it affect all of the html files at once.
Any ideas?
Reference your JS file in a script element as such
<script src="(LOCATION OF JS FILE)"></script>
This will cause the Javascript code to execute when the element loads.
Check out this tutorial for more info
http://www.w3schools.com/tags/tag_script.asp
You can have many files as you want. For example in a file called "header.js" you can put this:
var MY_CONSTANT = 34;
And in your html file simply put the reference to that file:
<script type="text/javascript" src="header.js>
<script type="text/javascript">
//You can use MY_CONSTANT here
var myNumber = MY_CONSTANT;
</script>
You can have many files as you want, but be sure to put the header.js before another scripts
I'm making a game in JS using P5, and I came upon a problem.
In my html file I have references to .js files:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.min.js"></script>
<script src="main.js"></script>
<script src="isKeyPressed.js"></script>
<script src="blocks.js"></script>
<script src="player.js"></script>
</head>
<body>
</body>
</html>
I have one .js file defining the function isKeyPressed():
function isKeyPressed(keyQuery) {
var did = false;
for(var i = 0; i < keysPressed; i++) {
if(keysPressed[i] === keyQuery) {
did = true;
}
}
return did;
}
I reference this in another object inside player.js:
player.motion = function() {
if(isKeyPressed('w')) {
this.velocity.add(0,-5);
}
if(isKeyPressed('s')) {
this.velocity.add(0,5);
}
if(isKeyPressed('a')) {
this.velocity.add(-5,0);
}
if(isKeyPressed('d')) {
this.velocity.add(5,0);
}
}
But when I try to call player.motion, I get the error:
Uncaught TypeError: isKeyPressed is not a function
Does anyone know why this is occurring?
For the record, I don't think the accepted answer is correct. Specifically, I don't think the accepted answer really changes anything from what you were originally doing. My guess is that you had another problem in your code (like a syntax error) that was causing this error, and you fixed that in the process of implementing the suggested solution. So while it might look like the solution fixed your problem, really it was something else.
I'm providing this alternative answer so you don't think you have to define your JavaScript in your html directly, as that is definitely not the case.
I tried testing out your setup by creating a smaller example consisting of three files:
index.html
<!DOCTYPE html>
<html>
<head>
<script src="one.js"></script>
<script src="two.js"></script>
</head>
<body onload="printObj()">
</body>
</html>
one.js
function printOne(){
console.log("one");
}
two.js
var obj = {};
obj.printTwo = function(){
console.log("two");
printOne();
}
function printObj(){
obj.printTwo();
}
This is pretty much exactly what your setup is, and it works fine. You absolutely do not need to put your JavaScript in your html. As long as the JavaScript files are correctly loaded in the proper order, then you can use functions and variables from one file in another file.
There are two main things that could cause your problem:
Are your files correctly loaded?
Are there any syntax errors you haven't noticed? (This is my guess as to what caused your original problem.) Check the JavaScript console, and try running some test code to actually run the functions you're trying to call.
Did you get all the file names correct?
Are you behind a firewall, or are there other network problems that might cause a problem with loading?
Are your files loaded in the proper order?
For file two.js to access code defined in one.js, you have to make sure one.js is loaded before two.js. It looks like you've done this correctly, but are you sure the JavaScript is where you think it is?
In other words, are you sure it was in player.js and not in main.js?
You might want to get rid of this ambiguity by placing related JavaScript in the same file. It doesn't make a ton of sense to have one file define a keysPressed array and then another file use that array to define an isKeyPressed() function. Just put them in the same file, and make sure that file is loaded before other files that use it.
The accepted answer doesn't change anything with regard to when stuff is loaded. Unless you had a syntax error, or the player.motion() function was actually in the main.js file, or you had a network loading problem, your code should have worked. So one of those things must be your actual problem. You do not have to define your JavaScript in your html for it to work.
I recommend not making a file name have capitals. So change it from
<script src="isKeyPressed.js"></script>
to
<script src="iskeypressed.js"></script>
also change the file name too.
You could try something like this
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.min.js"></script>
<script src="main.js"></script>
<script src="isKeyPressed.js"></script>
<script src="blocks.js"></script>
<script src="player.js"></script>
<script>
player.motion = function() {
if(isKeyPressed('w')) {
this.velocity.add(0,-5);
}
if(isKeyPressed('s')) {
this.velocity.add(0,5);
}
if(isKeyPressed('a')) {
this.velocity.add(-5,0);
}
if(isKeyPressed('d')) {
this.velocity.add(5,0);
}
}
</script>
</head>
<body>
</body>
</html>
This is importing all functions from the isKeyPressed.js file and therefore you are able to reference it in the <script> tag. You were not able to use isKeyPressed.js's functions in player.js because you cannot reference it.
I am trying to pass a variable from page 1, that has a javascript that uses a .js file for the submit button. I want to take that variable and pass through the .js file to a frames page that needs to output that variable again.
Here is the "button" I am trying to pass the variable (located in the .js file)
window.location = SC.baseUrl + '/reservation/' + reservation.token;
The variable I am trying to pass is called $event_name
The variable is being queries from mySql and I am using codeigniter. When the page loads, the query filles in the event name, which I am then trying to pass that variable into another page through this .js script.
Any ideas?
I would highly recommend looking into using browser cookies.
You can't pass variables between 2 separate JS files. What you could do is have functions in both files that return something. For example:
JS File 1
function myFunction1 (arg1) {
return arg1;
}
JS File 2
function myFunction2 () {
return myFunction1 ("foo"); //myFunction1 is in a separate JS file
}
alert(myFunction2()); //Throws alert message that says "foo"
HTML
<!DOCTYPE Html />
<html>
<head>
<title>
</title>
</head>
<body>
<script type="text/javascript" src="theJS2.js"></script>
<script type="text/javascript" src="theJS.js"></script>
</body>
</html>
Both files would have to be loaded into the same page, of course. KIND OF the same concept of using jQuery or some other JS Library with your code.
I am trying to write my javascript functions in a separate file functions.js. Right now that file consists of one function:
function noOverlay() {
$('.overlay').css('display','none');
};
In my html I have these two lines:
<script type="text/javascript" src="/functions.js"></script>
<script>
$(document).ready(
noOverlay()
);
</script>
Essentially what I am trying to do is house a function in an external file and call it in my html. Maybe $document.ready isn't the right way to do this. Or maybe I am just making a silly mistake. Thanks!
Make sure you are importing jQuery and try:
<script type="text/javascript" src="/functions.js"></script>
<script>
$(function () {
noOverlay();
});
</script>
$(document).ready(function(){
noOverlay();
});
Check to make sure the js file was loaded with firebug or chrome's dev tools
Also make sure you load jQuery beforehand as well.