script.js file not linking to to html files with script tag src attribute

Question

I am new to JavaScript. When I am trying the following code my js files are not getting linked and the JavaScript code from the html page is not executed : Both html and JavaScript files are at the same path.

MY html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;>
<title>JS Code</title>
</head>
<body>
    HTML
    <script type="text/javascript" src="script.js">
    debugger;
    document.write("HI i am from HTML with js code")
    nowCall1();
    function nowCall1(){
        document.write("-Js.")
        //peakOil(changeCivilisationCallback); 
    }
    </script>
</body>
</html>

script.js:

function peakOil(callback) {
    document.write("HI i am from Js");
    callback();  // the parentheses mean the function is executed!

}

function changeCivilisationCallback(){
     document.write("HI i am from changeCivilisationCallback");
}

function nowCall(){
    document.write("Js.")
    //peakOil(changeCivilisationCallback); 
}

But when I try to remove scr attribute put all code in html script is working. Why when I try to put code in js file, it is not executed. I am facing problem in debugging in google chrome browser.

Please help me understand javas cript, thanks in advance.

the code is full of errors. What are you trying to do? – vanntile Jan 14 '16 at 08:33 — vanntile, Jan 14 '16 at 08:33

score 1 · Answer 1 · answered Jan 14 '16 at 09:00

1

if the src attribute is present on the script tag the content of the scrip tag will be ignored, so you need to add your external script on a seperate script tag.

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

answered Jan 14 '16 at 09:00

keja

1,333
1
14
21

Yes you are correct, I have tried the same but, though my js and html files are in same location but now browser gives error saying : "Failed to load resource: net::ERR_FILE_NOT_FOUND" for my js files. Due to this my function call from is falling because it is present in js files which is not getting load. Do i need to follow any directory structure and path to load the script files in html files? – Gautam Jan 14 '16 at 09:20
if the script.js file is located at the same location as the html file, it should be fine, [you can read a bit about html paths here](http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/) – keja Jan 14 '16 at 09:30
I dont know why i am still getting this http://i.stack.imgur.com/53oWY.jpg, i have attached image of my error, now my js files is getting loaded but it says method not defined. – Gautam Jan 14 '16 at 10:33
1

does your editor open the scripts.js file if you hold down ctrl (or cmd if mac) and click on the filename within the src attr? - if not the editor can not find the file – keja Jan 14 '16 at 10:43
no it wont open that, i am using google chrome in windows system. – Gautam Jan 14 '16 at 11:16
are you working on a server or local on your computer? make sure that you have uploaded both files in case that you use a server, as it looks like the scripts.js file is not in the same directory as your html file (maybe not uploaded) – keja Jan 14 '16 at 11:20
I am working in local, I have started JavaScript recently, Actually I am from Java background. I dont know what i am missing here :( – Gautam Jan 14 '16 at 11:25
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/100661/discussion-between-keja-and-karo-la). – keja Jan 14 '16 at 11:33

score 1 · Answer 2 · edited Jan 18 '16 at 14:20

1

You should either link to an external script file with the script tag, or write the code inside the tag, you can't do both (but of course you can have more than one script tag).

You can find a note on this on w3schools:

If the "src" attribute is present, the <script> element must be empty.

edited Jan 18 '16 at 14:20

Mr Lister

45,515
15
108
150

answered Jan 14 '16 at 09:02

gorhawk

158
1
10

score 0 · Answer 3 · answered Jan 14 '16 at 08:38

This is the corrected JavaScript.

JS code from HTML:

document.write("HI i am from HTML with js code");
nowCall1();

function nowCall1() {
    document.write("-Js.");
        //peakOil(changeCivilisationCallback); 
}

script.js:

function peakOil() {
    document.write("HI i am from Js");
}
peakOil();

function changeCivilisationCallback() {
    document.write("HI i am from changeCivilisationCallback");
}

function nowCall() {;
    document.write("Js.")
        //peakOil(changeCivilisationCallback); 
}

In the HTML you should add the scripts this way:

<script type="text/javascript">
    //the rest of the code
</script>

score 0 · Answer 4 · edited May 23 '17 at 12:23

I have missed a " after content="text/html on the meta tag

With this correction that it work fine,

<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<title>JS Code</title>
</head>
<body>
    HTML
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript">
    debugger;
    document.write("HI i am from HTML with js code");
    alert("test1"); 
    document.writeln("\ after alert");
    nowCall();
    alert("test2"); 
    </script>
    </body>
</html>

Keja, Thanks it worked, with your input.

script.js file not linking to to html files with script tag src attribute

4 Answers4