No matter how I choose to add a javascript file to a html file, it doesn't seem to work. My original code is longer and has more stuff in it but I thought I would isolate the problem and see if with a very basic bit of code I would get the same problem (which I do).
I've tried adding the script tag to the head and to the body (at the start and at the end).
Brackets states that the function is never called and also seems to think that alert doesn't exist. If I add internal javascript it works.
in Chrome's console it reads:
test.html:1 Uncaught ReferenceError: helloWorld is not defined
at HTMLButtonElement.onclick (test.html:1) onclick # test.html:1
when I click the button.
HTML is:
<!doctype>
<head>
<title>testcode</title>
<script src="test.js"></script>
</head>
<body>
<button onclick="helloWorld()">Press to say hello world</button>
</body>
test.js is in the same folder and is:
function helloWorld() {
alert("Hello World!");
}
UPDATE: I changed nothing and just reopened the browser, now it works (currently missing python a lot).
The code is working for me. Maybe it's the path of the files. If the files are in the same level, it should works..
- index.html
- test.js
But if the script is in a folder, you should change the script tag. Exemple :
- index.html
- /js
- test.js
<script src="js/test.js"></script>
There is another case, if your html page is /article/hello and your js /test.js you should change the script tag with <script src="../test.js"></script>
It's working for me. I just copied and pasted your exact code and it was working for me. Make sure you have saved both html and js files in same directory.
In order to check if JS file is included just open Developers Options (Ctrl+Shift+I) in chrome and then see if you get any error like this(in case js file was not included)
Related
Hi I am trying to run some three.js examples locally on my machine. I know there are some problems with security so I need to set up a local server. So I'm running a local server with python. The background image and text displays but no animation is happening.
I checked console and getting the error THREE is not defined. I've downloaded three.js and put that folder in my project directory - any ideas on what's happening here?
The animation works in the browser when accessing from the three.js (examples) page. My script src is the same as the output of the command pwd when I am working on the command line in the three.js-master directory, as seen below:
<script src="/home/iiiiiii/Desktop/test/build/three.js"></script>
<script src="js/controls/TrackballControls.js"></script>
<script src="js/renderers/CSS3DRenderer.js"></script>
<script src="js/loaders/PDBLoader.js"></script>
Hi most common reason for this is that either you are not adding three js into your project as I can see in your given code snippet
/home/iiiiiii/Desktop/test/build/three.js
but given path is not a valid path to give inside a project I will suggest moving this file to the project folder like other js files you added in the given snippet.
Or Simply you can add a CDN for Three js in your project
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" integrity="sha512-dLxUelApnYxpLt6K2iomGngnHO83iUvZytA3YjDUCjT0HDOHKXnVYdf3hU4JjM8uEhxf9nD1/ey98U3t2vZ0qQ==" crossorigin="anonymous"></script>
Just put your <script src="three.js"></script> EXACT below the <body> tag that will help.
Does this library need to be called at the top of your document or after the page has been rendered?
I notice you dont have a type set when linking your libraries. try:
<script type="text/javascript" src="/home/iiiiiii/Desktop/test/build/three.js"></script>
Here is my first main html code
Main HTML file picture
and here is my second of my external file
$(document).ready(function() {
alert("hello");
});
I already tried putting the alert outside of the document ready function it still doesn't work.
I don't know why only the first one works please help. Also when I opened up my devtools and went to console it had a lot of but i can't put most of them because I don't have enough reputation to post more than one link. But here is one,
GET http://online-dnbard.rhcloud.com/tick/5620f410e59615263f000006 net::ERR_NAME_NOT_RESOLVED
ps. I am using brackets.
Note That you load up your external js file before jquery:
<script src="Javascript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
When you load up your file, you reffer to "$(document).ready", which isn't defined yet, so your browser throws an error.
Just change the order:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="Javascript.js"></script>
ps. Using the console in the future will save you a lot of time ;)
I am using a simple plugin from http://www.highcharts.com/demo/pie-basic which has a javascript file stored in view options. I am using this file in my index.html code as <script src="js/pie1.js"></script> inside <body> tag where pie1 is a javascript file stored in js folder. When i run my html page nothing happens.
can anyone help me where I am getting wrong? I am new to using plugins so please bear with me and correct me if anything is wrong.
Most likely you have this situation because javascript start running the plugin before your html is ready.
Place <script src="js/pie1.js"></script> just before closing tag </body>
I have this animation, see: js fiddle example
When I tried to convert it notepad++ .js and .html documents, I got:
uncaught reference error: Raphael is not defined.
What should I do to fix it? I gave the reference as:
<script type = "text/JavaScript" src ="Raphael 2.1.0.js"> </script>
You are not including raphael.js javascript file to your document correctly.
Add code below to your .html file, right before enclosing </body> element and any other javascript which are doing work with raphael.js library. (In other words, all javascript in js fiddle window goes below script include tag.)
<script type="text/javascript" src="path/to/raphael.js"></script>
// ... your raphael.js related javascript is located here ...
</body>
The reason why it works inside jsfiddle is that you can see from left upper corner of the page that Raphael 2.1.0 is selected, so jsfiddle includes it automatically to the page.
Hence, you should either download raphael.js file to your project folder or use extranal cdn url for the resource, such as http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js (but be aware, if location changes your code will stop working.)
Cheers.
I know this is silly but i think i cant crack it for last couple of hours.
I am writing to understand how this works.
I have a simple js function that i want it to be kept in an external file and it just dont work when invoked from my .php file.
Here is the setup:
I have 4 separate php files like register.php, dashboard.php, header.php, actions.php
I have defined some functions in my script.js like below
function fn1(){
alert("fn1");
}
function fn2(){
alert("fn2");
}
function fn3(){
alert("fn3");
}
Now, I have defined in my header.php to include this script file as
<!doctype html>
<html>
<head>
...
</head>
<body>
<script src='/js/script.js'></script>
</body>
...
I include this header.php in my other php files like
<?php include('header.php'); ?>
<script language="javascript">
fn1();
</script>
This does not work. It says ..
SyntaxError: syntax error script.js:1
ReferenceError: fn1 is not defined dashboard.php
Is there something wrong in the way i setup and distribute them into separate files ?
The same function if i locally define in these php files separately, it works fine.
So its a problem only when invoked from an external js script.
Please suggest what am i doing wrong.
I have bunch of functions that i wrote earlier which works fine but i want to understand this first so that i can go on with moving those functions in the same way to keep them global.
What i want to acheive ?
I have PHP files based on the view/actions as follows ..
login.php
register.php
dashboard.php
useraction.php
header.php
there are several div's like my navbar, footer, sidebar that are common to all these php's;
header.php has all the required js functions to load these div's based on various conditions and events;
My plan is to include header.php in all my php's so that all the functions defined in it are included too in every php file and the common div's are
loaded by the header.php itself.
Does it make sense ? Is this the right way to achieve this? If not, how do i do, please clarify.
So as per this plan, i attempted making a simple js function that can be kept in an external js to be called from these php which did not work
language is deprecated. You should just use <script> tags.
The problem is with your first line, you should post that, the posted code works fine, I just tested it. It's probably a syntax mistake.
Still, you should consider loading the scripts in a different php file than the one that takes care of setting up the header and the navbar or what have you.
Edit:
Sorry, I said probably a syntax mistake, when it clearly is just that:
SyntaxError: syntax error script.js:1
Delete the first line of your 'script.js' and it should work.
This got it working for me:
header.php
<!doctype html>
<html>
<head>
</head>
<body>
<script src='script.js'></script>
main.php
<?php include('header.php'); ?>
<script>
fn1();
</script>
script.js
function fn1(){
alert("fn1");
}
function fn2(){
alert("fn2");
}
function fn3(){
alert("fn3");
}
Edit 2:
Suddenly, this seems more a php question.
Your scripts should probably be loaded in a separate php file, scripts.php, that you include in the bottom of a specific php page, but just before opening the <script> tags, if there is need for particular js on that page.
This makes for a faster page loading. You could, though, include specific scripts in the header part, even in the document's <head>, but you should try to keep those scripts lightweight, so they don't heavily delay the user.
You can include php's anywhere. For example, this could be dashboard.php:
<?php include('header.php'); ?>
<div id="ImOnlyOnThisParticularPage"></div>
<!-- Footer loads scripts after the <footer> or divs that it contains -->
<?php include('footer.php'); ?>
<script>
var iOnlyDoSomethingInThisPage = function()
{
console.log("debug");
}
</script>
</body>
</html>
#param LoL i replicated your code and kept it in separate files and i am getting the alert as expected .In case you have issues open your console panel and try debugging.Press F12 and check for console related errors mostly u don't have your files are correct path