combining two functions in javascript

Question

I have these two functions which have mostly similar code.. so I want to combine them into one function..

previousMonthImg.onclick = function() {
    if (!(monthSelect.value === "Jan" && yearSelect.value === "2010")) {
        monthSelect.selectedIndex--;
        if (monthSelect.selectedIndex === -1) {
            monthSelect.value = "Dec";
            yearSelect.selectedIndex--;
        }
    }
    triggerEvent(monthSelect, "change");
    triggerEvent(yearSelect, "change");
};

nextMonthImg.onclick = function() {
    if (!(monthSelect.value === "Dec" && yearSelect.value === "2030")) {
        monthSelect.selectedIndex++;
        if (monthSelect.selectedIndex === -1) {
            monthSelect.value = "Jan";
            yearSelect.selectedIndex++;
        }
    }
    triggerEvent(monthSelect, "change");
    triggerEvent(yearSelect, "change");
}

I would keep them separate. They perform two very different er functions. — Andy
– Andy, Commented May 7, 2021 at 19:55

Unmitigated · Accepted Answer · 2021-05-07 19:58:45Z

1

You can use a function to create the event handler.

function makeHandler(monthEnd, monthStart, year, inc) {
    return function(){
        if (!(monthSelect.value === monthEnd && yearSelect.value === year)) {
            monthSelect.selectedIndex += inc;
            if (monthSelect.selectedIndex === -1) {
                monthSelect.value = monthStart;
                yearSelect.selectedIndex += inc;
            }
        }
        triggerEvent(monthSelect, "change");
        triggerEvent(yearSelect, "change");
    }
};
previousMonthImg.onclick = makeHandler("Jan", "Dec", "2010", -1);
nextMonthImg.onclick = makeHandler("Dec", "Jan", "2030", 1);

answered May 7, 2021 at 19:58

Unmitigated

91.4k12 gold badges102 silver badges109 bronze badges

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

Comments

Rohit Mittal · Accepted Answer · 2021-05-07 19:58:21Z

You can combine both functions as below:

monthImg.onclick = function() {
    let maxMonth = 0;
    let minMonth = 0;
    if (!(monthSelect.value === "Dec" && yearSelect.value === "2030")) {
        maxMonth = 1;
    }
    if (!(monthSelect.value === "Jan" && yearSelect.value === "2010")) {
        minMonth = 1;
    }
    if ((maxMonth) || (minMonth)) {
        if (maxMonth) {
            monthSelect.selectedIndex++;
        } else {
            monthSelect.selectedIndex--;
        }
        if (monthSelect.selectedIndex === -1) {
            if (minMonth) {
                monthSelect.value = "Jan";
                yearSelect.selectedIndex++;
            } else {
                monthSelect.value = "Dec";
                yearSelect.selectedIndex--;
            }                
        }
    }
    triggerEvent(monthSelect, "change");
    triggerEvent(yearSelect, "change");
}

But it will increase a bit complexity in the function. You can still keep them separated.

Bulent · Accepted Answer · 2021-05-07 20:04:39Z

0

You can use this one:

const myNewFunc = (month, year, num) => {
  if (!(monthSelect.value === month && yearSelect.value === year)) {
    monthSelect.selectedIndex = monthSelect.selectedIndex + num;
    if (monthSelect.selectedIndex === -1) {
      monthSelect.value = month == 'Jan' ? 'Dec' : 'Jan';
      yearSelect.selectedIndex = yearSelect.selectedIndex + num * -1;
    }
  }
  triggerEvent(monthSelect, 'change');
  triggerEvent(yearSelect, 'change');
}

nextMonthImg.addEventListener('click', () => {myNewFunc(...)})
previousMonthImg.addEventListener('click', () => {myNewFunc(...)})

answered May 7, 2021 at 20:04

Bulent

3,4411 gold badge19 silver badges25 bronze badges

Collectives™ on Stack Overflow

combining two functions in javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related