JavaScript function won't trigger when called in HTML file during Parcel build

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"
  }
}

Solution

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 />