I just try to test a very basic program in javascript but on my computer it does not work. It works on other computer but not mine. I'm launching it on chrome which has javascript activated. There is my code:
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>p5.js</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js">
</script>
<script src="script.js" type="application/javascript;version=1.7"></script>
</head>
<body>
</body>
</html>
script.js
function setup() {
createCanvas(400,400);
background(0);
var x = random(0,200);
rect(x,x,(200-x)*2,(200-x)*2);
}
function draw() {
}
In my folder I have also an asset folder which is empty and my style.css is empty. With this code I am supposed to have a black square on my screen (the canvas) but there is nothing, and when I check the console on chrome nothing is written. Moreover, the first time I launched index.html a file named debug.log appears:
debug.log
[0126/184004.266:ERROR:settings.cc(263)] Settings version is not 1
Why does this script work on other computer but not mine ?
Thanks for helping.
All of your audio your files listed in the JavaScript code MUST be named as HTTPS, not HTTP. And obviously, that means the website(s) you are linking to (including yours) must be secure. That is, you need to have your security certificates, and make sure they are activated. It's a security issue with Chrome. I hope that helps. = -)
You need to call your function:
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>p5.js</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
<script src="script.js" type="application/javascript"</script>
</head>
<body>
</body>
</html>
script.js
function setup() {
createCanvas(400,400);
background(0);
var x = random(0,200);
rect(x,x,(200-x)*2,(200-x)*2);
}
function draw() {
}
setup(); // that is a function call
I tested this on Firefox and Chrome and it works. Javascript is interpreted by your browser, it has nothing to do with your computer. If the exact setup above doesn't work for you then check here. If JS is enabled and it still doesn't work then try removing the p5.js script. If that still doesn't fix it then reinstall Chrome (or even better switch to Firefox)
The accepted answer would be correct if you were not using P5.js. But since you are, you should not call the setup() function yourself! Instead, you need to let P5.js do that for you automatically. It might work with this simple example, but you'll have other problems with e.g. draw() not being called 60 times per second. If setup() and draw() are not being called, that means you're not loading the library correctly.
You need to check your developer tools for any errors, both in the JavaScript console and in the network tab.
My guess is that you're accessing your page as a file:// URL, which can have problems. You need to run a local server and access your files that way instead.
Related
Hello I am new to JavaScript. I have looked through other posts but I cannot resolve my issue.
Earlier I was attempting to play around with the following script found here (How to read text file in JavaScript).
I got it working successfully SEVERAL times:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" />
<title>Read File (via AJAX)</title>
<script type="text/javascript">
var reader = new XMLHttpRequest() || new ActiveXObject('MSXML2.XMLHTTP');
function loadFile() {
reader.open('get', 'test.txt', true);
reader.onreadystatechange = displayContents;
reader.send(null);
}
function displayContents() {
if(reader.readyState==4) {
var el = document.getElementById('main');
el.innerHTML = reader.responseText;
}
}
</script>
</head>
<body>
<div id="container">
<input type="button" value="test.txt" onclick="loadFile()" />
<div id="main">
</div>
</div>
</body>
</html>
While testing this script, all of a sudden it stopped working! I have assured that my content blockers are disabled and javascript is enabled on my web browsers. I am not sure if I locked up my web browsers ability to use javascript while using this XMLHTTPREQUEST or possibly overloaded it. I even tried inserting a reader.abort() function to possibly close the request if it was still open somehow. I tried inserting alert() functions to troubleshoot that did not work. I tried restarting my computer that did not work. I am using a MAC and have tried the latest versions of Firefox, Chrome, and Safari which all do not work with javascript now.
It is so bad that I CAN'T even get this simple javascript example to work.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type=“text/javascript”>
document.write(“<h1>This is a test</h1>”);
</script>
</head>
<body>
</body>
</html>
PLEASE HELP! I don't know what I did or how to fix the issue.
Above script works only if you're loading the text file from a server. Make sure the file is located in the same place as your html file on the server and load the page with your server address. Most likely thing you're doing wrong is you're trying to access client's file. It doesn't work because that will be HUGE security breach, only the client can send you a file to read (If that is your intended purpose, then I advise you to use FileReader, example code can be found here).
About your second script, you're using “ instead of ".
I have a web page that originally had embedded JavaScript within a script section, and it worked fine when served up with a simple http server.
I now want to put my JavaScript, which manipulates SVG elements, in separate files, and as a first try, I put it all in a singe .js file:
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Some Graphics With SVG</title>
<head>
<meta http-equiv="refresh" content="5">
<style>
#svgContainer {
width: 2188px;
height: 1312px;
background-color: "white";
}
</style>
<script src="all.js"></script>
</head>
<body onload="resagui()">
<div id="svgContainer"></div>
</body>
I should note that the JavaScript function resagui appears at the top of all.js:
function resagui() {
...
}
Everything works great when I test this locally and view the page with file:///... from my browser. But when I try http://ipaddress:port it does not work.
I know that this is not a network issue, as the html file with embedded JavaScript works fine when I try http://ipaddress:port
My Firefox browser console provides two errors:
SyntaxError: expected expression, got '<'
and
ReferenceError: resagui is not defined
The html looks well formed, and there is no '<' character in my .js file.
Thanks for any insight you can provide.
Jay
So classic problem, but having a horrible time on finding the actual cause. Typically when I see this error it's because the jQuery reference is after code requiring it, or back jQuery link, or jQuery conflict, etc... so far none of those appear to be the case. Unfortunately seeking out the solution to this problem has lead me to post after post of such cases. I'm sure my problem here is equally as simple, but over an hour of hunting, still no luck...
Edit: Additional information...
The solution file (which I've recreated multiple times trying to figure this out. Is a JavaScript Windows Store Blank App template and I'm doing this in Visual studio. The only references files is Windows Library for javascript 1.0, I have tried deleting this to test as well.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Canvas Template</title>
<style>
/* styles here */
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
<p>Canvas not supported.</p>
</canvas>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var canvas = $("#myCanvas").get(0);
var context = canvas.getContext("2d");
function renderContent()
{
// we'll do our drawing here...
}
renderContent();
});
</script>
</body>
</html>
It's states that JQuery referred URL is not correct
Try this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
I tried everything listed above and nothing seems to work until I put this string
<script src="../scripts/jquery-2.2.3.min.js" type="text/javascript"></script>
in the head section of the HTML file. So here's how it looks:
<!DOCTYPE html>
<html>
<head>
<!-- jQuery Reference -->
<script src="../scripts/jquery-2.2.3.min.js" type="text/javascript"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>some title</title>
</head>
<body>
...
And the js file is located at a level below in the folder 'scripts'.
Finally, the error is gone and what a relief!
In my case, the problem was that I was rendering my page over https but I was trying to request the JQuery file over http, which is blocked by many browsers for security reasons.
My fix was to change this...
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
...to this...
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
This causes the browser to download JQuery using the same protocol (http or https) as the page being rendered.
Some of my clients had this problem, because apparently they blocked loading Javascript from 3rd party sites. So now I always use the following code to include jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
window.jQuery ||
document.write('<script type="text/javascript" src="/js/jquery-1.9.1.min.js">\x3C/script>')
</script>
This makes sure, that even if my client blocks loading the Javascript file from the CDN domain, the client still downloads the file from my own server, which is not blocked by the browser.
Anover variant, in my case - I was forced to use proxy. So - IE11--> InternetOptions --> Connections-->LANSettings-Proxy Server--> UseProxyServer - should be checked.
Also check awailability of jQUery script source, my worked variant in VS2012 - -just like in top example
I was getting this same error code:
(Error: 'generateText' is undefined)
...on the code
var bodyText=["The....now."]
I discovered on my text-editor(Notepad++), when typing many lines of text in the directly above the variable bodyText, if I didn't hit return carriage (enter==>WordWrap is off) just kept typing w/o return carriage and let the editor adjust text it worked?
Must be in the settings of Notepad++??
I realize this is a horribly newbie question, but Ive been trying to fix it for days trying different methods so I just wanted to ask what would you do.
I am attempting to create a web program to use at work, and I have this setup:
Windows 7
IE 7 - Cannot Upgrade.
The "website" is not a webhost, basicly I have a folder on my desktop with html/css/js files and I use IE to run the scripts, no host.
I want to keep a set of vars, mostly strings, in an external JS file and pull the JS into different HTML pages. I want it to write on load of the document.. not on ready. It does not have to be user dynamtic.
Also, When I make the js file, does it have to have a header.. like HTML has doctypes?
I really appreciate your help as I am trying to learn and will cont on my own from here. My setup is much different than most, and im not sure which part was causing my problem so I finally broke down and posted.
When you write your JavaScript file it doesn't have to have any header or doctype. For example you can have a variables.js file that looks just like this:
var x = "abc";
var y = "def";
and have many HTML files that include variables.js like this:
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>title</title>
</head>
<body>
<!-- page content -->
<script src="variables.js"></script>
<script>
alert(x);
</script>
</body>
</html>
and your variables should be available there. Any script that is included after the reference to your variables.js should have access to everything that was included before without the need to listen to any events.
If you need to listen to the events then I suggest to use jQuery or some other JavaScript framework. An example for jQuery would be:
$(window).load(function() {
alert(x);
});
A more advanced example of changing the DOM elements:
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>title</title>
</head>
<body>
<p>Select variable:</p>
<p>
Show x
Show y
</p>
<p>Value:</p>
<p id="value"></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="variables.js"></script>
<script>
$('#show-x').click(function (e) {
e.preventDefault();
$('#value').html(x);
});
$('#show-y').click(function (e) {
e.preventDefault();
$('#value').html(y);
});
</script>
</body>
</html>
If it's not a global variable, you can't display/print/access or whatever you call it because it has a local scope, defined in a function.
You can probably only use a debugger simply to debug it
So classic problem, but having a horrible time on finding the actual cause. Typically when I see this error it's because the jQuery reference is after code requiring it, or back jQuery link, or jQuery conflict, etc... so far none of those appear to be the case. Unfortunately seeking out the solution to this problem has lead me to post after post of such cases. I'm sure my problem here is equally as simple, but over an hour of hunting, still no luck...
Edit: Additional information...
The solution file (which I've recreated multiple times trying to figure this out. Is a JavaScript Windows Store Blank App template and I'm doing this in Visual studio. The only references files is Windows Library for javascript 1.0, I have tried deleting this to test as well.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Canvas Template</title>
<style>
/* styles here */
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
<p>Canvas not supported.</p>
</canvas>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var canvas = $("#myCanvas").get(0);
var context = canvas.getContext("2d");
function renderContent()
{
// we'll do our drawing here...
}
renderContent();
});
</script>
</body>
</html>
It's states that JQuery referred URL is not correct
Try this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
I tried everything listed above and nothing seems to work until I put this string
<script src="../scripts/jquery-2.2.3.min.js" type="text/javascript"></script>
in the head section of the HTML file. So here's how it looks:
<!DOCTYPE html>
<html>
<head>
<!-- jQuery Reference -->
<script src="../scripts/jquery-2.2.3.min.js" type="text/javascript"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>some title</title>
</head>
<body>
...
And the js file is located at a level below in the folder 'scripts'.
Finally, the error is gone and what a relief!
In my case, the problem was that I was rendering my page over https but I was trying to request the JQuery file over http, which is blocked by many browsers for security reasons.
My fix was to change this...
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
...to this...
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
This causes the browser to download JQuery using the same protocol (http or https) as the page being rendered.
Some of my clients had this problem, because apparently they blocked loading Javascript from 3rd party sites. So now I always use the following code to include jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
window.jQuery ||
document.write('<script type="text/javascript" src="/js/jquery-1.9.1.min.js">\x3C/script>')
</script>
This makes sure, that even if my client blocks loading the Javascript file from the CDN domain, the client still downloads the file from my own server, which is not blocked by the browser.
Anover variant, in my case - I was forced to use proxy. So - IE11--> InternetOptions --> Connections-->LANSettings-Proxy Server--> UseProxyServer - should be checked.
Also check awailability of jQUery script source, my worked variant in VS2012 - -just like in top example
I was getting this same error code:
(Error: 'generateText' is undefined)
...on the code
var bodyText=["The....now."]
I discovered on my text-editor(Notepad++), when typing many lines of text in the directly above the variable bodyText, if I didn't hit return carriage (enter==>WordWrap is off) just kept typing w/o return carriage and let the editor adjust text it worked?
Must be in the settings of Notepad++??