I have a problem that when I use a code that links to a .js file available online, the code works fine but if I try to save this .js file on localhost and then link to it, the code doesn't work. For example, This code
<!DOCTYPE html>
<html>
<head>
<title>MathJax TeX Test Page</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</head>
<body>
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</body>
</html>
works fine, but when I downloaded http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML to localhost and then link to it by changing
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
to
<script type="text/javascript" src="js/MathJax.js"></script>
This code stopped working. I encountered the same problem with pdf.js. This problem doesn't happen with every .js file. For example I downloaded jquery and jquery-ui files to localhost and they worked fine. Also, when I link to my own script files that I wrote the code works fine too.
I have checked that MathJax.js is in the js folder and its with other js files like jquery.js and usually when I use jquery.js I just use the line
<script type="text/javascript" src="js/jquery.js"></script>
My question is: Am I doing something wrong or do these files only work online?
Debug :
Open chrome developer tools by right clicking on page and doing
inspect element or view > developer > developer tools.
Navigate to network.You might have to refresh page after going to network.
Do you see file loads successfully?
If it's red then that means it didn't load correctly.
Right click and open it in new tab and verify path.
Update :
MathJax is a package so you have to link entire package rather than just individual file. Refer here http://docs.mathjax.org/en/latest/start.html#downloading-and-installing-mathjax
Make sure the link to the javascript file is correct.
<script type="text/javascript"
src="js/MathJax.js">
</script>
The above script says the file MathJax.js is inside js directory AND the js directory is at the same level as the file you are linking from
<script type="text/javascript"
src="./js/MathJax.js">
</script>
The ./ gives the file a relative startpoint. However, if the javascript is not in a folder entitled "js" which is sitting in the same folder as your html, this won't work.
The other solution is to build the entire absolute file path to the file in your tag, and end with "/MathJax.js".
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>
I am creating a browser based game with phaser, which involves linking to an external javascript file with my own code in it. For some reason when I use either
<script type="text/javascript" src="/js/main.js"></script> or
<script type="text/javascript" src="js/main.js"></script>
to link the javascript to the HTML, no 404 is thrown but the script does not run. However, if I move main.js to the root directory and put
<script type="text/javascript" src="main.js"></script>
in the exact same spot, the script runs fine. Any theories as to why this is? I am using chrome version 57.0.2987.133. Thanks in advance!
It should be:
<script src="./js/main.js"></script>
You had a simple scoping error and forgot the script's src.
I want to put a minified java script contents in tags directly in HTML page. i have html page like:
<html>
<head>
<script src="jquery.js"></script>
<script src="iemagic.js"></script>
<script src="shim.js"></script>
<script src="jszip.js"></script>
<script src="xlsx.js"></script>
</head>
</html>
I have minified all the javascript contents and put it in a single file called "all.js" and the html works fine, now it looks like :
<html>
<head>
<script src="all.js"></script>
</head>
</html>
I want to include all the content of "all.js" in to HTML directly in "script" tag. I tried with that but no luck, when i open html file in browser it show all the java script content which i have copied in "script" tag.
Is there any other way for this ?
Thank you all for helping me. i have found the solution for this. * added all the "js" files in different "script" tag tested working fine but some of the javascript lines was visible in the browswer. * The problem was "iemagic.js" was having the comments which are not proper and was creating the problem. * I have removed those commented lines and is working find now. without having any "js" file and only one HTML. Thank you All for your help and valuable time.
You can use gulp or jscompress
Anyone could help me explain why when I open the same file (one I place it in desktop and another I place it in the htdocs folder inside xampp) exactly the same file. When I open the file in the desktop, the jquery load() doesn't work, but when I open the file in the xampp folder, the jquery load() works fine.
I understand in the case of php file, the page need to be inside xampp folder to works, but these are only html file, does jquery load need to uses server-side scripting ?? Please help me explain this.
html file :
<!DOCTYPE HTML>
<html>
<head>
<script src='./js/jquery.js'></script>
<script>
$(document).ready(function() {
$(".div").load("test.txt");
});
</script>
</head>
<body>
<div class='div'></div>
</body>
</html>
test.txt :
test
my folder structure :
test
>> js
>> jquery.js
>> test.html
>> test.txt
Because you are including JQuery relative to the document you are loading:
<script src='./js/jquery.js'></script>
If you change that to:
<script src='//code.jquery.com/jquery-1.11.3.min.js'></script>
It should work from anywhere as you are loading jQuery from a remote CDN instead of locally.