External Javascript code not working

Question

0.00/5 (No votes)

See more:

Hi,
I am trying to learn javascript and html5, and I have created this file.
But, the external js file dont draw rectangle on my canvas.. if i move it to html page, it works fine, whats the problem? can anybody pointout please..

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type='text/javascript' src = '/js/main.js'>
</script>
<canvas id="myCanvas" width = "1300" height = "800" style="border: 1px solid black">Your browser does not support 

the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById('myCanvas');
drawRectangle(c);
</script>
</body>
</html>

here is the js file in folder js...
Main.js

JavaScript

function drawRectangle(c)
{ 
var ctx=c.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
}

Posted 14-Apr-14 1:40am

Yesudasan Moses

Add a Solution

Comments

enhzflep 14-Apr-14 8:07am

What does your javascript console say? My guess is that it shows an error - i.e file_not_found.

Unless your html file exists in the web-server root directory, it won't work - since you've got a '/' as the first character of the source.

Consider the following example:

My server's root folder on this machine is located at:

c:\xampp\htdocs

I put html/php files inside a folder named enhzflep, and images/scripts inside two separate folders: c:\xampp\htdocs\enhzflep\img and c:\xampp\htdocs\enhzflep\js

So, I would have C:\xampp\htdocs\enhzflep\index.html and c:\xampp\htdocs\enhzflep\js\Main.js

If I used your code as-is, it would actually tell the browser to ask for c:\xampp\htdocs\js\Main.js

Notice that we're no longer in the enhzflep folder any more? It's the first slash in the JS source that did that.

To get to the file I actually want (c:\xampp\htdocs\enhzflep\script\Main.js) I would change '/js/main.js' to 'js/main.js'

It's probably also worth getting in the habit of using the consistant capitalization. If your file is named 'Main.js', you should ask for that, rather than 'main.js'.

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Xiao Ling · Answer 1 · 2014-04-14T02:16:00

Solution 1

the error is

Quote:
GET http://127.0.0.1:8020/js/main.js 404 (Not Found) index.html:7
Uncaught ReferenceError: drawRectangle is not defined

change your source code to

<script type='text/javascript' src = 'js/main.js'>

Posted 14-Apr-14 2:16am

Xiao Ling

Snesh Prajapati · Answer 2 · 2014-04-14T02:49:00

Solution 2

Everything is looking fine. Remove unnecessary space before and after src attribute and try:

<script type="text/javascript" src="/js/main.js">
</script>

Posted 14-Apr-14 2:49am

Snesh Prajapati

Updated 14-Apr-14 2:50am

v2

Ajith K Gatty · Answer 3 · 2014-04-14T04:03:00

Hi Yesudasan,
I tried your code.It is working properly.

XML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="js/main.js"></script>
    <script>
        var c = document.getElementById('myCanvas');
        drawRectangle(c);
    </script>
</head>
<body>
    <canvas id="myCanvas" width="1300" height="800" style="border: 1px solid black">Your browser does not support
 the HTML5 canvas tag.</canvas>
</body>
</html>