如何组合两块相似的 JavaScript 代码？

Question

I'm trying to find a way of writing some sort of function so that I don't have to keep rewriting the same type of code.

As you can see below, both blocks of code are pretty much the same except one is for the lunchTimeSelector and the other is for the napTimeSelector ? Is there any way to write a function so that I can just automate this by just inputting an array like [lunchTimeSelector, napTimeSelector, dinnerTimeSelector] , etc. into a function to replace this code?

// Activates Lunch selector
var lunchTimeSelector =  document.getElementById("lunchTimeSelector");

var lunchEvent = function()
{
    lunchtime = lunchTimeSelector.value;
};

lunchTimeSelector.addEventListener("change", lunchEvent);





// Activates Nap-Time selector
var napTimeSelector =  document.getElementById("napTimeSelector");

var napEvent = function()
{
    naptime = napTimeSelector.value;
};

napTimeSelector.addEventListener("change", napEvent);

Answer 1

You could implement it like so:

function addChangeEvent(id, handler){
    document.getElementById(id).addEventListener("change", handler);
}
[["lunchTimeSelector", function(){lunchtime = this.value}], 
 ["napTimeSelector", function(){naptime = this.value}]]
    .forEach(([id,handler])=>addChangeEvent(id,handler));

Answer 2

maybe you can try:

// wrap all your logic 
function lanuchNapTimeSelector(id,state){

 var target =  document.getElementById(id);

// your handelers
 var lunchEvent = function()
 {
    lunchtime = target.value;
 };

 var napEvent = function()
 {
    naptime = target.value;
 };

 target.addEventListener("change", state === "nap" ? napEvent : 
 lunchEvent);
}