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

我试图找到一种编写某种函数的方法，这样我就不必一直重写相同类型的代码

正如您在下面看到的，这两个代码块几乎相同，除了一个用于

午餐时间选择器

，另一个用于

napTimeSelector

？有没有办法编写一个函数，这样我就可以通过在一个函数中输入一个数组（如

[午餐选择器、napTimeSelector、晚餐选择器]

等）来替换这个代码，从而实现自动化

// 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);

---

您可以这样实现它：

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));

也许你可以试试：

// 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);
}

---

考虑一个函数，在该函数中，您将传递元素ID，并建议您使用这两个元素进行更多的开发，以便我们更好地了解它们各自的值的用途。然后，可以开发一种更通用的方法，不仅用于设置单独的事件侦听器，还用于处理这些变量