I'm looking to do a simple process using the skypack (https://cdn.skypack.dev/) module in javascript.
I have described the following script.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample</title>
</head>
<body>
<button id="button" onclick="mybutton">click</button>
<!-- <script type="module" src="https://cdn.skypack.dev/#...<modulename>...">// <- Uncaught ReferenceError: mybutton is not defined -->
<script type="text/javascript" src="https://cdn.skypack.dev/#...<modulename>...">// <- Uncaught SyntaxError: export declarations may only appear at top level of a module
import { METHOD } from "<modulename>";
function mybutton(){
console.log("aaa");
// ... snip ...
}
</script>
</body>
</html>
However, the module does not work in the script tag.
I have tried two things.
import in the script tag.
This gave me the following error.
Uncaught SyntaxError: export declarations may only appear at top level of a module.
It seems that you need to use <script type="module" when importing a module.
do script type="module" .
This gave the following error:
Uncaught ReferenceError: mybutton is not defined.
It seems that the function defined directly below is not found.
What can I do to resolve these?
I will post the code that worked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="button">click</button>
<script type="module">
document.getElementById('button').addEventListener('click', mybutton);
import { METHOD } from "https://cdn.skypack.dev/.../<modulename>";
function mybutton(){
console.log("aaa");
// METHOD(arg); ...
// ... snip ...
}
</script>
</body>
</html>
Related
I have a JS file that exports some functions. I need one of those in the download attribute of the HTML body tag. How do I import the JavaScript function into the inline HTML?
I tried the following:
JS file
export function initPage() { ... }
HTML file
<script type="module" src="js/script.js"></script>
<body onload="initPage()">
But I get this error message:
Uncaught ReferenceError: initPage is not defined
I've found a Stackoverflow question but lost the URL to it. If someone knows which question I mean, please share the link and I'll delete this question
Thank you!
You could try following:
{...}
<body>
{...}
<!-- End of the body -->
<script type="module">
import {initPage} from '...';
document.addEventListener('DOMContentLoaded', function(event) {
initPage();
});
</script>
</body>
Basically the event listener DOMContentLoaded might be a modern way of solving your problem.
I've found a solution which is very easy, not quite exact that what I wanted but it works:
<script type="module">
import {initPage} from "./js/file.js";
document.querySelector("body").onload = function () { initPage(); } ;
</script>
Now the <script>-Tags with a src attribute aren't necessary anymore.
I did some tries and what seemed to work for me was to remove type="module" from the script tag and the export from the js function
Edit: What I meant was something like this
<!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>
<script src="/js/script.js"></script>
</head>
<body onload="initPage()">
</body>
</html>
and
function initPage() {
console.log('hupp');
}
I created an application using Firebase-CLI and I wrote a code to redirect when the user logged in to another location also when he did not. But when I try the serve it's not working
Here is my html code
<!DOCTYPE html>
<html>
<head>
<title>JTM Check</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- update the version number as needed -->
<script defer src="/__/firebase/6.0.2/firebase-app.js"></script>
<script defer src="/__/firebase/6.0.2/firebase-auth.js"></script>
<script defer src="/__/firebase/init.js"></script>
<script>
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
} else {
// No user is signed in.
}
});
</script>
</body>
</html>
and here is the error
(index):15 Uncaught ReferenceError: firebase is not defined
at (index):15
(anonymous) # (index):15
remove defer from your scripts
when present, it specifies that the script is executed when the page has finished parsing. so your script is executing before firebase is loaded
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 start a little project using pixijs. I follow that tutorial : https://www.youtube.com/watch?v=FrnXCZmmAZo but it doesn't work for me.
HTML :
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<script src="./node_modules.js/pixi.js/dist/pixi.min.js"></script>
<body>
<script src="index.js" type="module"></script>
</body>
I got pixi module with the following command : npm install pixi.js
index.js :
import * as PIXI from './node_modules/pixi.js/dist/pixi.min.js';
const log = console.log;
const app = new PIXI.Application();
Error :
PIXI.Application is not a constructor[En savoir plus] index.js:4:13
<anonyme>
http://localhost:3000/index.js:4:13
InnerModuleEvaluation self-hosted:4290:5 evaluation self-hosted:4243:9
UPDATE
HTML :
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<script src="./node_modules.js/pixi.js/dist/pixi.min.js"></script>
<script src="index.js" type="module"></script>
</body>
</html>
index.js :
const log = console.log;
const app = new PIXI.Application();
Error :
PIXI is not defined
The tutorial doesn't use modules.
PIXI is exposed globally: https://github.com/pixijs/pixi.js/blob/v4.8.1/src/index.js#L51
If you remove the import, and fix the typo in the script tag, it should work.
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<script src="./node_modules/pixi.js/dist/pixi.min.js"></script>
<script src="index.js" type="module"></script>
</body>
</html>
index.js:
const log = console.log;
const app = new PIXI.Application();
If you're using npm, I got this error cause I ran npm install pixi (incorrect) instead of npm install pixi.js (correct).
I am getting error ng:areq with the following code.please help me to figure out where it is causing.Thanks!
<!DOCTYPE html>``
<html ng-app>
<head>
<title>This is example</title>
</head>
<body>
<h1 ng-controller="HelloWorldMessage">{{helloMessage}}</h1>
<script src="angular.min.js"></script>
<script type="text/javascript">
function HelloWorldMessage($scope){
$scope.helloMessage="Hello World";
}
</script>
</body>
</html>
notice that your controller is not defined you just defined a function ,, you need to create a module first
angular.module("app",[]);
and then add you controller to this module using this line
angular.module("app").controller("HelloWorldMessage", HelloWorldMessage);
this way your code will work properly