I am new to Javascript and can't seem to load a simple Javascript file from an html file.
I have a folder on my desktop with an .html file and a .js file
The .html file contains the following html:
<html>
<head>
<title>Simple Page</title>
</head>
<body>
<p> this is a very simple HTML page</p>
<script src=“script.js”></script>
</body>
</html>
Inside my .js file I have the simple Javascript text:
alert("Hello world:);
When I open my .html file in a browser I just get the text:
"this is a very simple HTML page"
It doesn't run the script. I can't seem to find a way to make the .html file point to the .js script even though they are in the same folder on the desktop. What am I doing wrong? Also, I've tried to put the Javascript directly inside the html code (with the ( tags) and it doesn't work either.
What am I doing wrong? I've tried two different browsers. Is it a folder issue?
Thanks.
Three possibilities I can see here:
Your script has a colon instead of double quote
If the (1) is just a copy/paste error - your double quotes over "script.js" are wrong type (if you have copied/pasted this code from somewhere - just type them manually)
JavaScript is disabled in your browser(some browsers such as Internet Explorer will not load the JavaScript unless it served from a webserver such as apache or IIS for example).
To test if it is a browser issue place the javascript in a <script></script> tag right before the closing </body> tag. If it works using the following code then it an issue with your browser.
Example:
<script>
alert("hello world");
</script>
</body><!--above script should be placed before this tag -->
You have a syntax error in your Javascript code. Change the : after world to ".
alert("Hello world");
You have the wrong types of quotes in your <script> tag. You have to use plain, ASCII double quotes, not curly quotes.
<script src="script.js"></script>
I see a couple of issues:
(1) There's syntax error with your javascript. It should be (note double quote to end string):
alert("Hello world");
(2) Your double quotes were off in my text editor. It should be:
<script src="script.js"></script>
Related
I am at the start of learning Javascript, but within the first 10min I hit on a Chrome issue. I'm attempting to display the code I wrote with Visual Studio in the Chrome console, but rather than showing the code in the section below the menus 'Element', 'Console', 'Source' etc, the code displays exactly as I wrote it, but in the view panel including all html tags below the menu section 'Apps', 'Bookmarks', 'Customize Links' etc. How do I resolve this, any answers?
I tried to use ctrl-o to open the .js file whilst in Visual Studio and also whilst on Chrome, but only the file path to the .js file opened, and when subsequently clicking on the file it looked like the image below.
chrome not displaying JavaScript code in the location I want it to be
To clarify - you are loading a .js file in the browser which is what is displaying in chrome (the content of that file).
What you want to do is run that js file and have Chrome's JavaScript interpreter (V8) parse that information. To do that, you must add your script to an index.html page and then in index.html, load that e.g something like <script type="text/javascript" src="script.js"></script>
Alternatively, you can just run the JavaScript directly in index.html via
<script type="text/javascript">
// your JavaScript
</script>
You are opening the javascript file directly in the browser, not opening an .html file with a javascript tag. That's why Chrome is showing you the file content.
If you want to execute your javascript code in the Chrome console, paste it directly in the "console" tab of the developer tools.
If you want to execute your javascript code in a web page, you have to create an html file with a script tag loading your javascript code, something like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="main.js"></script>
</head>
<body>
</body>
</html>
In order to see your html content on browser you should load .html file instead of loading .js file
you can include your javascript code in two ways
Add your Javascript code inside the script tagcreate a new javascript file with extension .js and add it in your html file
Example1 (Adding Javascript inside script tag)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
console.log("good morning");
alert("good morning");
</script>
</body>
</html>
Example2 (Adding Javascript from external file)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="nameOfFile.js"></script>
</body>
</html>
I am using a local HTML file with link to an external script (located in the same directory) that worked when in the file, but externally doesn't. Neither Firefox nor Chrome. Code:
<html>
<head>
<script type="text/javascript" src="docket.js"> </script>
</head>
<body onload="doFunction()"> ...
The script is in a .js file, which has (simplified):
function doFunction() ....
For one, you shouldn't include the script tags in your external js file.
Also try to move the script line at the bottom before the closing body tag.
If after removing, it still doesn't work, you should open the developer tools to get clue of what is going on.
index.html:
<!DOCTYPE html>
<head>
...
</head>
<body onload="doFunction()">
...
<script type="text/javascript" src="docket.js"></script>
</body>
</html>
docket.js:
function doFunction() {
alert("hello...");
}
Note: no script tags
As per w3school - https://www.w3schools.com/tags/tag_script.asp
The external script file cannot contain the tag.
The syntax for script tag is -
<script src="URL">
Where your URL is -
1. An absolute URL - points to another web site (like src="http://www.example.com/example.js") OR
2. A relative URL - points to a file within a web site (like src="/scripts/example.js")
Note: with HTML5, type attribute for script tag is optional.
I'd suggest to add a noscript tag just to make sure you have JS enabled in your browser.
<noscript>Your browser does not support JavaScript!</noscript>
console.log doesn't display what I want it to show in my chrome browser dev console.
I have this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="script.js">
console.log(amazingCars);
var amazingCars =["BMW","Lexus","Ford","Mercedes"];
amazingCars.pop();
console.log(amazingCars);
amazingCars.sort();
console.log(amazingCars);
amazingCars.length;
console.log(amazingCars.length);
</script>
</body>
</html>
The directions for the assignment are the following:
Link the JavaScript page to the HTML page.
Create an array named amazingCars that contains four values:
BMW
Lexus
Ford
Mercedes
Remove the last value from the array
Next, sort the array in alphabetical order
Lastly, find the length of the array
I dont understand why it isn't displaying or the reason of this issue
If you are putting your JS code in html just add them between<script></script> tag.
You do not need to add src for script unless your JavaScript code is coming from a separate script file.
The src attribute specifies the URL of an external script file.
If you want to run the same JavaScript on several pages in a web site,
you should create an external JavaScript file, instead of writing the
same script over and over again. Save the script file with a .js
extension, and then refer to it using the src attribute in the
<script> tag
.
As per the instructions that you are following : "Link the JavaScript page to the HTML page."
Create another file "index.js" in your project directory.
Move your js code into the index.js file in your project directory and then use :
<script src="index.js"></script> in your HTML.
Firstly, make the <script src="index.js"></script> seperate from the code in the head, also unless if you have a seperate javascript file you dont need the src part at all, and secondly the first console.log outputs it before definition, creating an error. I hope this helped
You have to change <script src="script.js"> to <script>.
Alternatively you can keep it this way and create a script.js file and copy paste all the code you have inside the <script> tag to the file. This file need to be in the same folder as your index.html file.
Just getting back into coding after a very long break (approx 10 years) so apologies for any incorrect terminology / if this is a basic question.
-Max OS X
-Text Edit
-Google Chrome
Working on a course on Lynda on programming fundamentals. When I type the HTML source code like for like, my version doesn't trigger the .js file, whereas if I c+p the source code from the tutorial file, it does.
Using Textedit as my editor. Very confusing as it is very simple code, and I have copied it identically, but it doesn't react the same way when I type it myself. The rest of the HMTL loads fine but the .js script just doesn't load.
<html>
<head>
<title>Simple Page</title>
</head>
<body>
<p>This is a very simple HTML page</p>
<script src="script.js"></script>
</body>
</html>
I've uploaded the files to mediafire. Container.html is from the tutorial. Container1.html is the HTML file I have typed out myself. Have been scratching my head over this for a while and can't figure out what the difference is between the 2 files except the size (4 bytes).
http://www.mediafire.com/file/p4sz93u9g6admwn/Textedit_JS_Problem.zip
Thanks!
H
It's because of double quotes in your Container2.html. So its seems the code changes its format from UTF to a different one. So what you need to is, open your container2.html file, and go to this line
<script src=“script.js”></script>
Change it to below by deleting double quotes and typing again:
<script src="script.js"></script>
Notice the change in double quote ;)
So, I have this really weird error. I am trying to link to an external JS file from my HTML file. Whatever I do, the functions in that external JS file can not be called.
This is my HTML code:
<html>
<head>
<meta charset="UTF-8">
<script src="cookies.js"></script>
<script type="text/javascript">
//some other JavaScript...
function test() {
extTest();
}
</script>
</head>
<body>
<button type="button" onclick="test();">Test</button>
</body>
</html>
And this is my external JavaScript file:
function extTest() {
alert("Hello world");
}
(I simplified both code blocks to contain only the necessary lines.)
So, whenever I click the button, the function extTest() is supposed to open a popup saying "Hello world". But extTest() is not called. Instead, I get a ReferenceError saying "extTest is not defined". The problem occurs in Firefox as well as Chrome and Edge.
Both files (HTML and JS) are in the same directory on my laptop. I tried linking to the JS file with a relative link (as shown in the code above), a relative link using . for current directory (./cookies.js), and an absolute link (/C:/...). I also tried putting the JS file in its own folder and linking to it, it didn't work.
I'd consider myself rather a beginner when it comes to JavaScript, but I already used external JS files and it worked. Do you guys have any idea where this error comes from? I mean, I could put all the code from the external file into the script in the HTML file, but I'm really curious why it's not working the other way.
Any hints are highly appreciated, thank you in advance.
You can use just like this, you don't need to make another function inside because i suppose you make the js code in cookies.js
<html>
<head>
<meta charset="UTF-8">
<script src="cookies.js"></script>
</head>
<body>
<button type="button" onclick="extTest();">Test</button>
</body>
</html>
I'd say initially it looks like you are declaring your function test but not invoking it. Try putting a line below that just has:
test ();
A question, if you similarly invoke your extTest function at the bottom of your external .js file, by which I mean again putting a line that says
extTest(); does it work as intended? If it doesn't, then there may be another issue at hand.