The problem is that I try to put my codes in separate javascript files. And one file will refer to an variable in a file which is referenced in index.html file previously.
For instance, the two files in my public folder are client.js and test.js.
In my client.js file, I have these codes:
function init() {
var socket = io.connect();
var temp = x;
}
document.addEventListener("DOMContentLoaded", init, false);
In my test.js file, I have these codes:
var x = 5;
In my index.html file, I have these codes:
<!DOCTYPE html>
<html>
<head>
<title>Amazing Particle System</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<canvas id="particle"></canvas>
<script src="/socket.io/socket.io.js"></script>
<script scr="/test.js"></script>
<script src="/client.js"></script>
</body>
</html>
But when I run my code I always get the error:
client.js:15 Uncaught ReferenceError: x is not defined
In developer tool I cannot see my test.js file in sources tab.
Is there anything I have done wrong in my code? How can I fix the issue?
You have to correct a typo in <script scr="/test.js"></script>, you have wrote scr instead of src attribute.. That's why your script do not work as expected
Related
I created a Flask App using Pycharm.
I have an inline Javascript function internaltest() which is placed inside a html file. When I click a button, the function is supposed to call an external javascript function, and post an alert. For some reason, instead of running the current code in the Javascript file, it runs the previous code. (see below)
hom2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="/static/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="{{url_for('static', filename='test.js')}}"></script>
<script>
function internaltest(){
externaltest();
}
</script>
<button onclick="internaltest()">clickhere</button>
</body>
</html>
test.js (current version)
function externaltest() {
alert("This is supposed to be running");
}
test.js (previous version)
function externaltest() {
alert("This is NOT supposed to run");
}
I first ran test.js from hom2.html, which worked. Then I changed the alert from test.js and ran hom2.html again. Instead of alerting the new string, it alerts the one before I made the changes.
Directory:
app_code
static
test.js
templates
hom2.html
I would appreciate any help.
I want to use variables which is in main.js file in other js file and I tried everything ( exporting modules, declaring global variables) but nothing works and I have to do it because other js file is greatly dependent to those variables which are in main.js file.
Is there any other way to do it, if yes, please enlighten me.
Since you've stated that you're writing JavaScript code to be executed in web browsers, here's what your main.js file may look like (holding the variable importantVariable):
const importantVariable = 10;
Next, we have another JavaScript file, other.js (using the variable importantVariable):
console.log(importantVariable);
In the HTML document, where you're willing to use the scripts, include the main.js BEFORE the other.js file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="main.js"></script>
<script src="other.js"></script>
</body>
</html>
You should get "10" in the console, which indicates that the variable sharing of one file with other[s] worked successfully.
Explanation: A variable in the global scope should be accessible to all scripts loaded after it is declared.
We can use es modules in browsers.
index.html
<!DOCTYPE html>
<html>
<body>
<script type="module" src="./main.js"
</body>
</html
main.js
import { message } from "./other.js";
console.log(message)
other.js
export const message = "haha"
Note:
Due to the CORS policy, openning index.html directly will throw an error.
...has been blocked by CORS policy...
So you need to deploy them in an server.
Have you tried importing it into the receiving JavaScript file? This can sometimes be necessary as well as exporting it. Here's an example
In index.js:
export someVariable
In otherFIle.js: import { someVariable } from './index'
Whenever I compile my C code with emcc main.c -o index.html emscripten generates an html file with their logo and some buttons and the console. But I don't want those. I only want the canvas where I can show my SDL rendered stuff.
I did a little bit of research and found this question in stack overflow. Apparently you have to enter emcc --shell-file and give it some template html as an argument.
So I made a template html file like so
<html>
<head>
<title>Some title</title>
</head>
<body>
</body>
</html>
But when I ran emcc main.c -o index.html --shell-file template.html it gave an error. Apparently emscripten looks for some think like - {{{ SCRIPT }}}.
So I added {{{ SCRIPT }}} inside my body. It compiled fine. But when I ran my index.html in localhost:3000 I got an error in the console which said cannot find addEventListener of undefined.
[N.B. I am running an SDL program. The one mentioned in their docs
What should I do? Thanks in advance
Here is a minimal example that you can use as your index.html, assuming your canvas code is in index.js:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<!-- Create the canvas that the C++ code will draw into -->
<canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
<!-- Allow the C++ to access the canvas element -->
<script type='text/javascript'>
var Module = {
canvas: (function() { return document.getElementById('canvas'); })()
};
</script>
<!-- Add the javascript glue code (index.js) as generated by Emscripten -->
<script src="index.js"></script>
</body>
</html>
I have a small problem. I'm developing a game using CraftyJS and I need to use Electron to run it, but Electron throws this error:
Uncaught TypeError: Crafty.scene is not a function
at Level1.js:4
Why does it do this? Here's the relevant code + markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Overtime-game</title>
</head>
<body>
<div id="game"></div>
<script type='text/javascript' src='./node_modules/craftyjs/dist/crafty.js'></script>
<script src='./Level1.js'>
</script>
</body>
</html>
JS:
//Relevant code:
Crafty.scene('main', function() {
Crafty.init(500,500, document.getElementById('game'));
// rest of Crafty.scene...
}
Crafty.scene('main')
FIXED ON ELECTRON FORUMS:Apparently if you require a module in the file Electron will not look in node_modules.
https://discuss.atom.io/t/solved-typeerror-crafty-scene-is-not-a-function/61273
I've made an application with a PouchDB frontend that is stored as a CouchDB attachment.
I have this html page stored at localhost:5984/repository/b/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="/repository/b/pouchdb.min.js" type="text/javascript"></script>
<title>practice</title>
<div id="practice">
</div>
</head>
<body>
<div id="app"></div>
<script src="/repository/b/build.js" type="text/javascript"></script>
<script src="/repository/b/store.js" type="text/javascript"></script>
</body>
</html>
Pouchdb.min.js is successfully stored at the src referenced in the head. I try to reference it in store.js:
var db = new PouchDB('http://localhost:5984/repository');
var text;
var b = document.getElementById('practice');
db.info().then(function(info) {
text=info;
}).then(function(){
b.innerHTML=text;
});
I get the error
ReferenceError: PouchDB is not defined
When I look in my debugger, in the application section of chrome, it shows that the pouchdb file contents are loaded. In the network section, all of my resources are showing 304 errors.
Can anyone guess what might be going on here?