how can i make my function reusable whilst using the (e) parameter?

Question

     const days = document.querySelector('#days');
     const hours = document.querySelector('#hours');
     const minutes = document.querySelector('#minutes');

      document.querySelector('#years').addEventListener('input', function (e) {

      let years = e.target.value;  

      days.lastElementChild.innerHTML = years * 365;
      hours.lastElementChild.innerHTML = years * 8760;
      minutes.lastElementChild.innerHTML = years * 525600;  


      });

I really need help with this one. When using the e parameter i can target the value from when the event is triggered using this code. I get that i can call the parameter anything and use target to access all the juicy information about the event in the console. What i do nott understand is, why cant i pass arguments with the e to make my function reusable. I want to pass my variables via arguments and store placeholders as parameters and work against them. Instead if I store (e) as a parameter, unless i am missing something, I am forced to reference my variables inside my function because I cannot seem to pass other arguments with (e). Is there a way i can e.target.value and still pass arguments to my function? This one has really got me stuck, thanks

Answer 1

One method is to record the id attribute values for output parent elements as a data attribute on the input element used to enter a year. Another method could involve setting up a table of parent elements using the id of the input as key.

A third option is to add the event listener (which is passed an event object as argument) inside a closure: ie inside an outer, reusable function which is called with all necessary argument values to add an event listener to a specific elements and handle events that are raised.

Here's an example of the first approach:

 "use strict"; function showDHM(event) { let years = event.target.value; event.target.dataset.for.trim().split(/\s*,\s*/).map( id => document.getElementById( id)).forEach( (element, index) => { const multiplicand = [ 365, 8760, 525600]; element.lastElementChild.innerHTML = years * multiplicand[index]; }); } const year1 = document.querySelector('#year1') year1.dataset.for = "days1, hours1, mins1"; year1.addEventListener('input', showDHM);

 <label> Year: <input type="number" id="year1"></lable> <p> <span id="days1"><span>days</span></span>, <span id="hours1"><span>hours</span></span>, <span id="mins1"><span>mins</span></span>

Note the code is for demonstration only: adjustment for leap years not included!

---

The next snippet demonstrates the closure option. The conversion process used to modify the posted code was largely mechanistic: replace hard-coded values with argument names and include the modified code in an outer function.

 "use strict"; function handleYears( yearsSel, daysSel, hoursSel, minutesSel) { const days = document.querySelector(daysSel); const hours = document.querySelector(hoursSel); const minutes = document.querySelector( minutesSel); document.querySelector(yearsSel).addEventListener('input', function (e) { let years = e.target.value; days.lastElementChild.innerHTML = years * 365; hours.lastElementChild.innerHTML = years * 8760; minutes.lastElementChild.innerHTML = years * 525600; }); } handleYears("#year1", "#days1", "#hours1", "#mins1");

 <label> Year: <input type="number" id="year1"></lable> <p> <span id="days1"><span>days</span></span>, <span id="hours1"><span>hours</span></span>, <span id="mins1"><span>mins</span></span>