I'm new to Webpack & node, so bear with me. I'm trying to create global event listeners on the Document Body and run functions as they change / click, etc. My problem is the event listeners are not attaching to the document. I can inspect the body and none of the event listeners are attaching. What am I doing wrong?

• The file is loading properly
• I'm getting an error: e is undefined when the validateProductAttribues(e) function is run.
• I tried moving the Click and Change event listeners into the DOMContentLoaded listener, but that didn't work.

I'm trying to organize my code like so:

Product.js

import { validateProductAttributes, resetProductAttributes } from "./product-functions";


function runClickEvents(e) {
  resetProductAttributes(e);
}

/**
 * ======= CHANGE EVENT =========
 */
function runChangeEvents(e) {
  if (e.target.id.includes("pa_")) {
    showAddOnsMessage();
    validateProductAttributes(e);
  }
}

// Run Load Events
document.addEventListener("DOMContentLoaded", runLoadEvents);
// Run Click Events
document.body.addEventListener("click", (e) => runClickEvents);
// Run Change Events
document.body.addEventListener("change", (e) => runChangeEvents);

// Adds class of Validated to select box when an option is selected
export function validateProductAttributes(e) {
  e.target.value !== "" ? e.target.classList.add("validated") : e.target.classList.remove("validated");
}