I have a basic HTML form page that is linked to a JavaScript file. Both files exist in a Node project and I am using Parcel as a bundler (because I eventually want to convert this to TypeScript).
When I run the html file in the browser, the JavaScript function will trigger, but when I run the Parcel build, the index.html will compile, but the JavaScript function won't trigger. It recognizes the js file because I can call dom queries outside the function.
When I check in the console I get the error:
(index):12 Uncaught ReferenceError: validationFunction is not defined
at HTMLInputElement.onchange
But this doesn't make sense because the function is defined outside the Parcel build.
How can I get the index.html page to recognize the JavaScript function when it is compiled with Parcel?
The index.js file is below:
function validationFunction(event) {
event.preventDefault();
var div;
div = document.getElementById("appendedText");
div.innerHTML += "hello world";
}
The index.html is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<form action="" method="post">
First name:<br />
<input onChange="validationFunction(event)" type="text" name="firstname" /><br />
<input type="submit" name="Submit" />
</form>
<h1></h1>
<div id="appendedText"></div>
<script src="index.js"></script>
</body>
</html>
And the package.json is:
{
"name": "typescriptprojects",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "parcel index.html"
},
"author": "",
"license": "ISC",
"devDependencies": {
"typescript": "^3.5.3"
},
"dependencies": {
"parcel-bundler": "^1.12.3"
}
}
I have a basic HTML form page that is linked to a JavaScript file. Both files exist in a Node project and I am using Parcel as a bundler (because I eventually want to convert this to TypeScript).
When I run the html file in the browser, the JavaScript function will trigger, but when I run the Parcel build, the index.html will compile, but the JavaScript function won't trigger. It recognizes the js file because I can call dom queries outside the function.
When I check in the console I get the error:
(index):12 Uncaught ReferenceError: validationFunction is not defined
at HTMLInputElement.onchange
But this doesn't make sense because the function is defined outside the Parcel build.
How can I get the index.html page to recognize the JavaScript function when it is compiled with Parcel?
The index.js file is below:
function validationFunction(event) {
event.preventDefault();
var div;
div = document.getElementById("appendedText");
div.innerHTML += "hello world";
}
The index.html is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<form action="" method="post">
First name:<br />
<input onChange="validationFunction(event)" type="text" name="firstname" /><br />
<input type="submit" name="Submit" />
</form>
<h1></h1>
<div id="appendedText"></div>
<script src="index.js"></script>
</body>
</html>
And the package.json is:
{
"name": "typescriptprojects",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "parcel index.html"
},
"author": "",
"license": "ISC",
"devDependencies": {
"typescript": "^3.5.3"
},
"dependencies": {
"parcel-bundler": "^1.12.3"
}
}
3 Answers
Reset to default 22The parcel js bundle isn't available in the global namespace by default.
You can either attach your functions to the window object directly and then your code should work as is:
window.validationFunction = function validationFunction(event) {
event.preventDefault();
var div;
div = document.getElementById("appendedText");
div.innerHTML += "hello world";
}
Or use the global flag to export a named module:
// package.json
"scripts": {
"dev": "parcel index.html --global myCustomModule"
},
// index.js
module.exports.validationFunction= function validationFunction(event) {
event.preventDefault();
var div;
div = document.getElementById("appendedText");
div.innerHTML += "hello world";
}
// or alternatively index.ts
export function validationFunction(event) {
event.preventDefault();
var div;
div = document.getElementById("appendedText");
div.innerHTML += "hello world";
}
// index.html
<input onChange="myCustomModule.validationFunction(event)" type="text" name="firstname" /><br />
I am using pure js and html with parcel. I couldn't get the correct answer to run. Its never able to find my function ( i think because its never exported ). I personally solved what i was trying to do by setting the on click event to the element at the end of the js file..
import { isEven } from '../src/ease.rs'
function rustIt(){
var input = document.getElementById("entered-number").value
var res = isEven(input)
if (res === 1) { //true
document.getElementById("result").innerText = "TRUE!!!"
}
else {
document.getElementById("result").innerText = "FALSE!!!"
}
document.getElementById("entered-number").value = ''
}
document.getElementById("myButton").onclick = function (){
rustIt()
};
and my html is simply
<html>
<body>
<script src="./index.js"></script>
<div style="justify-content: center;">
<label for="entered-number">
enter number please
</label>
<input id="entered-number" type="number" style="border: 1px black solid" />
<button type="button" id="myButton">USE RUST</button>
</div>
<div id="container">
RUST SAYS: <span id="result"></span>
</div>
</body>
</html>
in order for you to enable javascript with parcel you have to first install libraries like lodash with the following cmd:
npm install --save-dev lodash
next on your index.js file you have to import lodash using the following code
import _ from "lodash"
now you can use the underscore with all your js methods or
loops and it should work perfectly for example
const collapsibles = document.querySelectorAll(".collapsible");
_.forEach(collapsibles, (item) =>
item.addEventListener("click", function () {
this.classList.toggle("collapsible--expanded");
})
);