JavaScript function won't trigger when called in HTML file during Parcel build
Question
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"
}
}
2 answers
solution1
21 ACCPTED 2019-08-22 06:16:07
The 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 />
solution2
0 2021-04-10 16:53:50
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.