events with addEventListener-CodePudding

I'm tried to something like : Catch all events in my addEventListeners and then call my function calculateBill. I have a problem my events are lost. It is possible to pass the parameters for each addeventlister separately. I try to do it since few hours and i have no idea what's happening here.

const billInput = document.querySelector('#bill');
const percentageButton = document.querySelectorAll('.tip__values--item');
const numberOfPeople = document.querySelector('#people');
const tipAmount = document.querySelector('.result__amount--price');
const totalBill = document.querySelector('.result__total--price');
const reset = document.querySelector('button');

const catchBill = (e) => {
    return e.target.value;
};

const catchPeople = (e) => {
    return e.target.value;
};

const handleButtons = (e) => {
    return e.target.textContent;
};

const calculateBill = (catchBill, catchPeople, handleButtons) => {
    console.log(
        'catchBill:',
        catchBill,
        'catchPeople:',
        catchPeople,
        'handleButtons:',
        handleButtons
    );
};

billInput.addEventListener('keyup', function (e) {
    calculateBill(catchBill(e), catchPeople, handleButtons);
    
});
numberOfPeople.addEventListener('keyup', function (e) {
    calculateBill(catchBill, catchPeople(e), handleButtons);
    
});
percentageButton.forEach((btn) => {
    btn.addEventListener('click', function (e) {
        calculateBill(catchBill, catchPeople, handleButtons(e));
        
    });
});

I know that i can do this FrontedMentor challenge in other way but I'd like to know is this possible to do it that way. I know that problem is with parameters that i call in addeventlistener. How can i get my parameters in my calculateBill function with all events?

CodePudding user response：

You'll need to cache the result of each event somewhere so that you can retrieve them later, or retrieve the value in every input each time any event takes place. It looks like calculateBill expects arguments to be strings, not functions, so passing catchBill, catchPeople, or handleButtons (which are functions) to it doesn't make sense. Consider something like:

// assign default values here if you want
let billValue;
let numPeople;
let percValue;

const handleBillChange = (e) => {
  billValue = e.target.valueAsNumber;
  calculateBill();
};
const handlePeopleChange = (e) => {
  numPeople = e.target.valueAsNumber;
  calculateBill();
};
const handlePercentageChange = (e) => {
  percValue = e.target.textContent;
  calculateBill();
};
billInput.addEventListener('keyup', handleBillChange);
numberOfPeople.addEventListener('keyup', handlePeopleChange);
billInput.addEventListener('keyup', handleBillChange);
// This is a NodeList, not a button. Consider naming the variable more precisely.
// percentageButtons, perhaps?
percentageButton.forEach((btn) => {
  btn.addEventListener('click', handlePercentageChange);
});

While it'd be technically possible to store the previous events instead, and then do something like

billInput.addEventListener('keyup', function (e) {
    calculateBill(catchBill(e), catchPeople(previousPeopleEvent), handleButtons(previousButtonEvent)); 
});

for all the inputs and buttons, that'd be extremely strange. Better to store just the values.