how to chain 2 different event handlers between factory functions?

Question

I have 2 buttons, called ButtonA and ButtonB. Each buttons have their own event handlers and also being scoped by each different function factories.

And I want to chain these 2 buttons to set an argument as a global variable in one of factories called Worker, but somewhat reason Worker cannot register the argument.

This is the result when I clicked buttonA 1 time then ButtonB 3 times in order to.

> Order receives from Manager manager.js:9  
> Responses in Worker worker.js:9
> Meal worker.js:11
> Responses in Worker worker.js:9
> undefined worker.js:11 // It should return Meal 
> Responses in Worker worker.js:9
> undefined worker.js:11
> Responses in Worker worker.js:9
> undefined worker.js:11

Here's the code:

// manager.js
import Worker from "./worker.js";
const Manager = (() => {
   var upperChain = (elem) => {
       elem.addEventListener("click", Interface.sendOrderToWorker);
   };
   const Interface = {
       sendOrderToWorker: async (event) => {
           // do something..
           console.log("Order receives from Manager");
           Worker.getReceipt("Meal"); // Send data from here
       }
   };
   return {
       upperChain: (elem) => upperChain(elem)
   };
})();
export default Manager;

// worker.js
const Worker = (() => {
    // this.string;
    let food;
    var lowerChain = (elem) => {
      elem.addEventListener("click", (event) => Interface.getReceipt());
    }
    const Interface = {
        getReceipt: async (string) => {
            console.log("Responses in Worker");
            food = string;
            console.log(food); // Receives data from here.
        }
    }
    return {
        lowerChain: (elem) => lowerChain(elem),
        getReceipt: (param) => Interface.getReceipt(param)
    }
})();
export default Worker;

// index.js
import Manager from "./manager.js";
import Worker from "./worker.js";

let buttonA = document.getElementById("buttonA");
let buttonB = document.getElementById("buttonB");

Manager.upperChain(buttonA);
Worker.lowerChain(buttonB);

Any solutions?

Answer 1

I'm not sure if I read this correctly, but when you call getReceipt() in the Worker.lowerChain you don't pass a string argument. But in the getReceipt() you set the food to some string. => when you click the button the food value becomes undefined;

EDIT for clarification:

import Worker from "./worker.js";
const Manager = (() => {
   var upperChain = (elem) => {
       elem.addEventListener("click", Interface.sendOrderToWorker);
   };
   const Interface = {
       sendOrderToWorker: async (event) => {
           console.log("Order receives from Manager");
           Worker.getReceipt("Meal"); // Will set food to "Meal" in Worker
       }
   };
   return {
       upperChain: (elem) => upperChain(elem)
   };
})();
export default Manager;

// worker.js
const Worker = (() => {
    let food;
    var lowerChain = (elem) => {
      elem.addEventListener("click", (event) => Interface.getReceipt()); // Since calling getReceipt without arguments will leave 'food' as is because argument 'string' is undefined
    }
    const Interface = {
        getReceipt: async (string) => {
            console.log("Responses in Worker");
            food = string || food; // Here food was ALWAYS set to string..but string wasn't always set
            console.log(food);
        }
    }
    return {
        lowerChain: (elem) => lowerChain(elem),
        getReceipt: (param) => Interface.getReceipt(param)
    }
})();
export default Worker;

// index.js
import Manager from "./manager.js";
import Worker from "./worker.js";

let buttonA = document.getElementById("buttonA");
let buttonB = document.getElementById("buttonB");

Manager.upperChain(buttonA);
Worker.lowerChain(buttonB);