I'm trying to execute a javascript file in my browser but the code is displayed and not actually executed. I'm using firefox and I made sure javascript is enabled. I tried using a .js extension and .shtml and both just display the code. The file is located in my apache htdocs folder and it's version 2.2.
I'm trying to run this hello world code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="helloworld.js"></script>
</head>
<body>
<p id="hello"></p>
</body>
</html>
Here's the javascript
document.getElementById('hello').innerHTML = 'hello world';
Any suggestions?
You have no element with the ID of ex.
With the HTML you've shown, your line should be:
document.getElementById('hello').innerHTML = 'hello world';
See now that <p> tag has the id="hello" -- how would a call to getElementById('ex') be able to find that?
EDIT
Working JSFiddle example
try something like this
<html>
<head>
<script type="text/javascript" src="helloworld.js"></script>
</head>
<body onload="onload1()">
<p id="hello"></p>
</body>
</html>
helloworld.js
function onload1(){
document.getElementById('hello').innerHTML = 'hello world';
}
Save the above code as .htm or .html. Your server is probably not configured to use SSI (.shtml extension).
You said you saved it as .js and as .shtml, this is probably where you have gone wrong. .js files will not display properly when opened directly by the browser, as the browser is not intended for displaying JavaScipt, thus you must use a file type that is intended for HTML. The .shtml extension is for HTML, however it is only used with servers using SSI (Server Side Includes), so if the server does not use SSI it will not work.
Usually you will see code when the mime type is wrong. The mime type is how the server tells the browser what kind of file it is sending http://en.wikipedia.org/wiki/Internet_media_type. The server sends the mime type, which it determines by looking a the files extension, or in some cases certain parts of the file (and server side code can adjust the mime type as well). The server will give files with the .htm and .html extension the HTML mime type, but .js will not have that type. The .shtml file will only be given the HTML mime type if the server uses SSI. So when the browser gets those files it will intemperate them as plain text. This is why you see the code.
So either change the extension to .htm or .html, or enable SSI on the server (or ensure it is configured to work in that directory).
As a side note, your JS will not do anything as there is no element with the ID 'ex', however that should not produce the problem of seeing code. It will however give you trouble down the line.
Related
Both my p5.js and sketch.js scripts will not load.
My index.html is loaded by Node.js
I think I am misusing the src value in my<script> tag in the HTML.
My p5.js script is up one level and in a folder called P5, and my sketch.js file is in a folder called P5Scripts in the same directory as this index.html file.
In the chrome console, I get this message :
Loading failed for the <script> with source “http://45.76.140.199:3000/P5/p5.js”.
and
Loading failed for the <script> with source “http://45.76.140.199:3000/P5Scripts/sketch.js”.
I can see that my src attribute is wrong, but what would be the correct way to load these scripts?
index.html:
<!doctype html>
<html>
<head>
<title>My Website</title>
</head>
<script src="../P5/p5.js"></script>
<script src="P5Scripts/sketch.js"></script>
<body>
</body>
</html>
There isn't a way to bind nodejs with the DOM elements of your html because nodejs is backend and html DOM elements are frontend.
Since you are trying to modify the html, chances are that what you really want is to use plain javascript which would run on the browser.
Nodejs is a backend technology which runs on the server. At the time the html is displayed nodejs has already done its work and isn't aware of what is going on the page unless AJAX involved.
Have a brief look to client/server model here.
It is a rather wierd problem. Consider the following small perl code:
#!/usr/bin/perl
use strict;
use warnings;
use CGI qw{ :standard };
use CGI::Carp qw{ fatalsToBrowser };
my $q = CGI->new;
print "Content-type: text/html\n\n";
print "<head>\n";
print "<script src='/home/bloodcount/Desktop/pm.js' type='text/javascript'></script>\n";
print "</head>\n";
print "<body>\n";
print "<h1>Click any number to see its factors</h1>\n";
print "</body></html>";
It prints a very small html page and includes a jasvascript file. The problem is that the javascript file isn't included. The "physical" copy is in the correct place. I thought that something may be wrong with the code I am generating so I copied the raw html which comes out if you run this file in the console which is:
Content-type: text/html
<head>
<script src='/home/bloodcount/Desktop/pm.js' type='text/javascript'></script>
</head>
<body>
<h1>Click any number to see its factors</h1>
</body></html>
I ran it in chrome and it worked perfectly. The javascript file has exactly one line if code which is:
console.log("It works!");
Any ideas what may be causing this?
Note: I know that the second code listing doesn't have !DOCTYPE.
Since you are able to execute the CGI within your browser you must have a local web server running. Your <script src='...'> path is likely unreachable from the browser due to a lack of access rights or the proper alias configured within your web server.
It works from the static file because the browser is then going though filesystem directly, so the JS file path name resolves.
You have to put the .js file somewhere that the web server knows about, and then formulate your src path correctly.
Check your web server logs and documentation to see how to set up the proper access rights and/or aliases. Note you probably do not want to expose ~/Desktop to the internet.
As an example, if you are using Apache, see USERDIR, ACCESS CONTROL, ALIAS.
After some tinkering I found the solution:
Apache searches for scripts and files only in the folder for this website meaning that each website has one specific folder where you must put the scripts. The base folder path is: /var/www/ and from there on you must find your website.
This means that when before the set path was: /home/bloodcount/Desktop/pm.js
it actually searched for the path /var/www/home/bloodcount/Desktop/pm.js which didn't exist. It wasn't searching in the real desktop, nor was there a permission problem.
I'm working with classic asp on server including the javascript file in the document like this:
<!--#include virtual="datoteke/jsPDF-master/jspdf.js"-->
...when i run my file on server, browser prints all the comments from included files to the screen. I tried to include it also like this:
<script type="text/javascript" src="jsPDF-master/jspdf.js"></script>
...it worked on localhost, but on server it doesn't, i get an error when i create an instance to the class in my javascript file: "[object Error]"
Why is it printing all those comments to the screen and how do I actually include javascript on server side? What did i do wrong?
The browser looks for JavaScript code in <script> tags. Your first statement does not seem to include those tags at all. I guess you want something like this:
<script type="text/javascript">
<!--#include virtual="datoteke/jsPDF-master/jspdf.js"-->
</script>
You should also know that the virtual directive makes a subrequest to load the file through the web server, which I suspect don't need/want. Give file a try.
Edit: There's a quite nice article about SSI in Wikipedia. Please note that IIS supports Server-Side Includes but it isn't related to ASP Classic at all.
In the VS2010 IDE when a breakpoint (or an error) is hit, it opens a read-only [dynamic] version of the external JavaScript file I referenced. My workflow would be vastly improved if I could immediately edit this file, and refresh the browser. That is as opposed to digging up the original JS file opening it, finding the correct line and editing there.
I only know that this is possible because I was able to do this on my old work computer configuration, but for the life of me I can't duplicate it at home.
Has anyone made this work? Perhaps an extension? or maybe it has to with the way the files are referenced, or my basehref tag, or url rewriting.
This happens when the base href specifies a domain other than localhost. My issue was that to enable a local environment for Facebook JS, I need my domain in the url. So I set up my host file to remap localhost.mydomain.com to localhost.
When the Visual Studio IDE encounters a file reference which is something other than localhost, it does not attempt to grab the local file since it assumes (correctly in most cases) that it is being served from another site. In these cases it loads a file as [dynamic] and readonly.
Here is the test case:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://localhost.mydomain.com/virtual-directory/" />
<script type="text/javascript" src="test.js"></script>
</head>
<body>
</html>
Any breakpoint within test.js will result in opening a readonly dynamic file.
how are you referencing your files? whenever a script block is written inside the html or is dynamically inserted the debugger will open the instance of the page where the code stops. If you reference the script using tags vs should open the original script file (at least that's what it does on my machine). could you upload an example of your current structure?
I'm getting an error reading one of my JavaScript files ("Resource interpreted as script but transferred with MIME type text/html.") from Google Chrome. The other three JS files that my page calls load just fine, and I'm confused about what is causing this problem since they are all marked up in exactly the same way (and each has a "type=text/javascript" attribute). Safari and Firefox both have no problem reading all four JS files. Can anyone give me a tip on how to troubleshoot this properly? Thanks for any help!
Without going any further, this error what it tells us is that we are sending JS code as plain text rather than sending the header as a script.
This is and happens because we define the tag as an attribute <script type="text/javascript">, when we should put <script type="application/x-javascript">.
Incorrect example:
<script type="text/javascript" src="js/utils.js"></script>
Correct example:
<script type="application/x-javascript" src="js/utils.js"></ script>
Then Google Chrome will understand it.
Jordi. :)
It looks like one of your JavaScript files is not being sent with the correct Content-type header. The type attribute specified in the script tag won't have an effect here - it's the script file's header that counts.
My guess would be it has a non-standard extension (e.g. .php or .asp) that causes your server to send a different MIME type that that for .js files.
I think that this is a webkit bug. I don't think you can troubleshoot this.
try using proper content type in the page which actually refer the script.
Something like
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
and then start your HTML with
<html xmlns="http://www.w3.org/1999/xhtml">
PS: the magic is in the "strict" :)
Check to make sure that the file actually exists too. In FireFox it will report that it was loaded even when the file doesn't even exists.