My problem is, that I have created a js file. In this file are some text defined.
channel = {
categorie_one: "Hauptsender",
categorie_two: "Spartensender",
categorie_three: "Regionalsender"
}
Now I want to embed categorie_one in a other js file. That I'm doing with that code:
channel.categorie_one;
But it shows in console: Cannot read property 'categorie_one' of undefined, logical I have linked the file...
Im including the js files in the index.html
<script src="javascripts/default.js" type="text/javascript" rel="javascript"></script>
<script src="javascripts/resources.default.js" type="text/javascript"></script>
In the default.js I have a methode to load the site.
function ChannelLoad(listview) {
//there should be cateogrie_one
}
could you help me pls. Thanks in advance
add a semicolon to your variable definition:
channel = {
categorie_one: "Hauptsender",
categorie_two: "Spartensender",
categorie_three: "Regionalsender"
};
syntactically your variable definition is a statement; if placed in a row with other statements (i assume that's where it will end up after inclusion of your js files), they have to be separated by semicolons.
In your html file include the scripts in the right order:
<script type="text/javascript" src="defines_object.js"></script>
<script type="text/javascript" src="uses_property.js"></script>
Make sure the object isn't defined in a function or the scope of the object will be limited to that function.
If you defined the channel variable in the resources.default.js file and you are trying to access it in the default.js file, you have to reverse the order in which you link the JS files.
Try:
<script src="javascripts/resources.default.js" type="text/javascript"></script>
<script src="javascripts/default.js" type="text/javascript" rel="javascript"></script>
This code should work.
The only thing you must be aware of is the order you include the files, all files will be executed in the order of their includes, so you should include first the file declaring the object, containing
channel = {
categorie_one: "Hauptsender",
categorie_two: "Spartensender",
categorie_three: "Regionalsender"
}
then include the second file, using channel.categorie_one;
If this still doesn't work, please post your whole code, there's probably a scope issue (channel is declared in a local scope)
You should include your scripts in the right order:
<script type="text/javascript" src="defines_object.js"></script>
<script type="text/javascript" src="uses_property.js"></script>
Related
I am defining the source of a .js file and attempting to call a function from that file in the same tag, as follows:
<script type="text/javascript" src="jsFunctionTest.js">
testMethodCall();
</script>
The .js file just contains:
function testMethodCall(){
window.alert("Hello there");
}
This doesn't work, I don't see the alert.
However, if I change the tag to two tags, as below, then it works:
<script type="text/javascript" src="jsFunctionTest.js"></script>
<script type="text/javascript">
testMethodCall();
</script>
This seems pretty messy. Is there any reason the first one doesn't work?
script elements can have a src attribute or content, but not both. If they have both, the content is ignored (the content is considered "script documentation," not code).
You cannot register an external file and use the content in it, both at a time inside <script> tags. Only either one is allowed.
I have a HTML file with the content:
<script src="http://spelprogrammering.nu/simple.js">
function test()
{
//Function stuff
}
</script>
However, I'd like to write all my javascript (Function test) in a separate document (.js). How do I refer to, or call, this separate file so I get the same result as if the code was directly in the HTML?
I need the http://spelprogrammering.nu/simple.js to ease the graphics handling in function test.
You already have what you need in your source.
<script src="http://spelprogrammering.nu/simple.js"></script>
In the html section, refer to the file that contains your javascript, I'm assuming the html file is in the same folder as that containing your script.
<script src="script.js"></script>
If the script is in a different folder...
<script src="/path/to/script.js"></script>
<script src="http://spelprogrammering.nu/simple.js"></script>
<script src="main.js"></script>
Where main.js contains your function.
I think that you say that? in this case you need to make difrent script calling your .js
<code>
<script src="http://spelprogrammering.nu/simple.js"></script>
<script src="http://spelprogrammering.nu/other.js"></script>
<script src="http://spelprogrammering.nu/other2.js"></script>
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 have a situation where I need to refer a jqplot.pieRenderer.min.js file to a particular script block only. Because if it is used globally at the top, it is throwing error for the other scripts block functions. How can i maintain that js file to particular script block.
I tried below.
<script src="jquery.jqplot.min.js" type="text/javascript"></script> // global js file
<script type="text/javascript" src="jqplot.pieRenderer.min.js"> //using specific js
$(document).ready(function () {
BindLocationStock();
BindStatusWiseStock();
});
<script type="text/javascript"> //using global js
$(document).ready(function () {
BindBarChart();
});
Can first script block use global js file and block level js file? I want this scenario. How can I achieve this. Please assist here.
As far as I know, it is not possible to do what you are trying to do.
This is one of the reasons why the module pattern is so useful for JavaScript.
I recommend refactoring your code to use the module pattern - that way, you won't have global variables interfering with one another.
I think it's conflict issue. Either you can use jQuery.noConflict or wrap up your code like this:
<script src="jquery.jqplot.min.js" type="text/javascript"></script> // global js file
<script type="text/javascript" src="jqplot.pieRenderer.min.js"> //using specific js
(function ($) {
BindLocationStock();
BindStatusWiseStock();
BindBarChart();
})(jQuery);
here in index.tpl
here in javas.js
var currentTS = "{literal}{$userid}{/literal}";
alert(currentTS);
but there will be alert {literal}{$userid}{/literal} not the $userid.
any idea?
Smarty only works under php, you can't run it in .js , unless you add .js to php extensions in apache configruations.
On top of that it seems to me that you are trying to access the {$userid} variable from your index.php. That is never gonna happen! unless you include the file server side like karvonen explained.
And your {literal} tags are unnecessary you start literal when you are gonna use { and } that are not smarty tags but for javascript, css, etc..
and the only time you see them around smarty tags is the other way around as karvonen explained
here's my suggestion: in your index.tpl right before including the java.js file do this:
<!--index.tpl-->
<script type='text/javascript'>UserID = '{$userid}';</script>
<script type='text/javascript' src='pathto/java.js'></script>
/*java.js*/
var currentTS = UserID;
alert(currentTS);
Include the javascript file in your index.tpl. If you have it outside your template directory you must use the file:/... notation (and use your own path, of cours):
<html>
<head
<script type='text/javascript'>
{include file='file:/home/www/mydomain/public_html/js/javas.js'}
</script>
if you have it in your template diretory simply:
<html>
<head
<script type='text/javascriptä>
{include file='javas.js'}
</script>
Now Smarty should parse and compile it.
Moreover, it seems to me that you {literal}{/literal} are the wrong way around. If you are using curly braces in your js file you should start the js with a {literal} tag and "unliteralize" the smarty variables:
{literal}
function test() {
var name = '{/literal}{$name}{literal}';
// do something
}
{/literal}
Don't use {literal}
You don't need it here.
{literal} forces to display all { as they are and don't parse smarty code. Therefore {$userid} will be displayed, as it is.
There is no point in displaying it at the place you are.