I'm trying to make an incremental game just for fun and to learn Javascript, I came from Java to Javascript and I can't figure it out how to import "classes" or "modules" from another package or folder
I tried to create a folder named Minerals and inside of it I have gold.js, iron.js and copper.js
In src folder I have both index.html and main.js (main class)
Inside gold.js I have this piece of code:
export {goldData, mineGold}
var goldData = {
gold: 0,
goldPerClick: 0,
goldPerClickCost: null
}
function mineGold() {
datosGold.gold += 1
document.getElementById("amountOfGold").innerHTML ="Gold: " + goldData.gold
}
and in the main.js i tried many things, like creating mineGold() there and many other things without any success. And when I import gold.js all my functions inside main.js turn to "unused functions" and don't work when I call them from index.html
I imported the file like this (tried both):
import {goldData, mineGold} from "./Minerals/oro" //option 1
import * as todo from "./Minerals/oro" //option 2
When I try to use the button linked to mineGold() from index.html I get:
Uncaught ReferenceError: mineGold is not defined at HTMLButtonElement.onclick
Here's the full code but in Spanish (since I'm from ARG): https://github.com/FacuFu/VicionariiMiner
Basic question is:
How to use functions defined in a .js file from an .html file if the .js file use import from another .js file
Also you can directly see the webpage trough: http://facufu.tk
Use this to be run
todo.function()
Related
I want to make my own javascript library with some utils functions and classes for the client browser. The point its I only want to include the main file.
https://github.com/encarbassot/elioUtils.js
I've tried using the type module
having ./src/array.js, ./src/math.js, ./src/dom.js with some functions with export, thei i have two options
OPTION 1:
/lib/utils.js
import * as array from "./src/array.js"
import * as dom from "./src/dom.js"
import * as math from "./src/math.js"
export {array,dom,math}
but in the script i have to do:
script.js called from html
import {math} from "/lib/utils.js"
const {lerp} = math
the point of modules is to import only the functions you need and here i'am importing all math functions
OPTION 2:
import {zip,create2DArray} from "./src/array.js"
import {isTouchDevice,coptyToClipboard,scrollToCenter} from "./src/dom.js"
import {lerp,inverseLerp,map,clamp} from "./src/math.js"
export {zip,create2DArray,isTouchDevice,CopyToClipboard,lerp,inverseLerp,map,clamp}
but in this example every function i create in some ./src/ file i have to modify the utils.js file
also all libraries i use they dont use module, they are a big class or a big function
i thought about putting all inside a big object like
const utils = {}
utils.lerp = (start,end,amt)=>{
return (1-amt)*start+amt*end
}
// ... and more functions
or using multiple files and then compile them to the big file maybe ???
other option would be to do
document.write('<script src="/lib/src/math.js"></script>');
document.write('<script src="/lib/src/dom.js"></script>');
document.write('<script src="/lib/src/math.js"></script>');
but for what i think its not a very good practice
and last, jQuery you can import the file like a module and like a src file
and i'm trying to avoid things like webpack, i want to keep it vanila
Newbie here in Office add-ins and JavaScript, so please be patient!
I created a Javascript Excel custom functions add-in, by using the Yeoman generator. In one of my custom function I want to use a JS function defined in an external file. So I defined a function named testExternal and placed it in taskpane.js file:
export function testExternal() {
return 1;
}
then in the functions.js file I have:
import { testExternal } from "../taskpane/taskpane.js";
and in my custom function:
console.log(testExternal());
When debugging, I'm getting the desired 1 in console, but also get the "Cannot use import statement outside a module" error message:
This happens not only in debug mode, but also when the add-in is published on a web server and the add-in is sideloaded. So the external defined function is working correctly, but:
is there any way to get rid of that error message?
what are the steps to use a function defined in another JS file (not in taskpane.js)? Let's say I want to have all my utils functions in a file named utils.js and use that in my custom functions. What is the best location for utils.js and how can be automatically added to the dist folder, when the project is build in VS Code?
Thank you for your time,
Adrian
javascript + html :
If you are using native javascript "for browser" (I'm mean it's not a node application that use packages, etc...).
When you import a script where you need to use import statement you need to set his type as module :
<script src="app.js" type="module"></script>
utils.js
function foo() {
return 'Hello';
}
export { foo };
This one is a module :
app.js
import { foo } from 'utils.js';
node.js :
If you want want to use ES Modules you have to set the property type of your package.json as module :
package.json
{
"type": "module"
}
If office add-in doesn't allow you to use ES Modules you have to use Nodes modules to import / export things :
utils.js
function foo() {
return "Hello";
}
module.exports = foo;
// or
module.exports.foo = foo
Then :
const foo = require('utils');
// or
const { foo } = require('utils');
I have two files, one is my main js file called app.js and I have a file where I store all my js functions, called functions.js. As you can see on the image below.
But I want to include the functions.js file into the app.js file. So I googled on how to do it and this is what people said:
But my npm run dev says the file doesn't exist. But the path is correct. What am I doing wrong here, is there a other way to do it?
You can simply just create the file wherever you want to create it, and then export some properties or methods, and then import them in your app.js file, or in whatever file you need. Something like this :
//new_file.js
export const jokes = function() {
return ['funny', 'not really funny', 'boring']
}
export const heading = 'some global heading to be reused.'
And in your app.js file :
import { jokes, heading } from 'new_file.js'//specify actual path here .
console.log(jokes) // ['funny', 'not really funny', 'boring']
console.log(heading)//some global heading to be reused.
This tutorial might be helpful too .
http://www.2ality.com/2014/09/es6-modules-final.html
I have these functions
function showNotification(response) {
notification.innerHTML = `${response.data}`
notification.style.display = 'block'
notification.classList.add('created-notification-animation')
}
function resetNotification() {
notification.style.display = 'none';
notification.classList.remove('created-notification-animation')
}
function clearInputValues() {
movieTitle.value = ''
movieRuntime.value = ''
movieIsAvailableOnVhs.value = ''
movieReleaseDate.value = ''
}
I want to use these functions for DRY coding, I have 2 scripts I want to use these functions in.
I have 2 different HTML files that are being used, one for each script.
One script is main.js that holds these functions and more code, in index.html.
The other script is movieList.js that holds a list of movies, but I want to use these functions in that script as well, this script is in movieList.html.
How can I access these functions in each script without having to copy and paste the functions to the other script?
Is there a way to import/export?
I'm using node on the backend, but this code is all client side JS, so typical export default/export doesn't work.
Thank you!
If you include the file containing these functions to the HTML files, you can use these functions in other included JS files in the HTML.
Suppose we created a JS file named utils.js and we write all general purposes javascript codes like your notification functions, all we have to do is include this utils.js file in our HTML file.
Example:
<script src="/my_path/utils.js"></script> // This file containing my noticiation functions
<script src="/my_path/main.js"></script> // main javascript file
<script src="/my_path/myMovie.js"></script> // this files containing related my movies.
This is just an example. You can write your functions in any javascript file and you can use these functions in other javascript file or in your HTML. Just include the file containing the functions you want to use.
have you tried to import that javascript file that contains those functions in the HTML file where you want to use it?
Let's say I have a function in test.js file that I want to use in index.js file
If I import them in an HTML file like this it will work.
Note: Import the file with those functions before importing files that will use them
<script src="./test.js"></script>
<script src="./index.js"></script>
You have to import another file to your index file
<script src="./firstfile.js"></script>
<script src="./secondfile.js"></script>
Is there any problm is the following steps.
1- Suppose i have a js file rough1.js with the code shown below
export function exp1(a,b) {
return a * b
}
2- I've another file rough2.js
export var x = exp1(1,2);
3- In index.js I imported previous two script as shown below
import {exp1} from './rough1';
import {x} from './rough2';
Now when i perform npm run build it shows in console that
Uncaught ReferenceError: exp1 is not defined
So how to resolve this issue? How i will get my index.js to work with no error (recognising the imported value from one file in another)?
As far as i can see you need to use this statement in rouge2.js
import {exp1} from './rough1';
Thanks