How do I combine two blocks of similar JavaScript Code?

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

Suggest you develop it a bit more with those two so we can better see what they are intended to do with their respective values. Then a more generic approach can be developed not just for setting separate event listeners but for whatever processing you do with those variables as well — charlietfl
– charlietfl, Commented Jul 6, 2020 at 3:42

Unmitigated · Accepted Answer · 2020-07-06 03:39:18Z

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

answered Jul 6, 2020 at 3:39

Unmitigated

91.5k12 gold badges103 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ayman Morsy · Accepted Answer · 2020-07-06 03:51:32Z

0

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

answered Jul 6, 2020 at 3:51

Ayman Morsy

1,4591 gold badge13 silver badges32 bronze badges

Collectives™ on Stack Overflow

How do I combine two blocks of similar JavaScript Code?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related