Transform 3 similar functions into one

Question

In my project, I have very similar functions, with the same intention, however, as it is a DOM class exchange function (classList.replace), I ended up making a very repetitive code, and I’d like to reduce it to make it reusable in the future. However, despite several attempts with loops like for...if and forEach, I ended up crashing, and for lack of programming logic experience, because I study programming only 6 months, I could not.

Here’s the code:

handleLeftAnswer() {
    $leftDiv.classList.replace('leftside-div', 'leftside-div-js');
    $centerDiv.classList.replace('centerside-div', 'centerside-div-js-no-display');
    $rightDiv.classList.replace('rightside-div', 'rightside-div-js-no-display');
  }

  handleMidAnswer() {
    $centerDiv.classList.replace('centerside-div', 'centerside-div-js');
    $rightDiv.classList.replace('rightside-div', 'rightside-div-js-no-display');
    $leftDiv.classList.replace('leftside-div', 'leftside-div-js-no-display');
  }

  handleRightAnswer() {
    $rightDiv.classList.replace('rightside-div', 'rightside-div-js');
    $centerDiv.classList.replace('centerside-div', 'centerside-div-js-no-display');
    $leftDiv.classList.replace('leftside-div', 'leftside-div-js-no-display');
  }

What I tried to:

handleRightAnswer(rightOne) {
    const options = ['left', 'center', 'right'];
    
    console.log(rightOne);
    switch (rightOne) {
      case rightOne: 'left'; break;
      case rightOne: 'center'; break;
      case rightOne: 'right'; break;
    }


    for (const option of options) {
      const isThisTheRightAnswer = option === rightOne;
      const element = document.querySelector(`.${option}side-div`);
      console.log(element);
      isThisTheRightAnswer ? element.classList.replace(`${option}side-div`, `${option}side-div-js`)
        : element.classList.replace(`${option}side-div`, `${option}side-div-js-no-display`)
    }
  }

What mistakes did they make in that attempt:

1. rightOne was coming back as a mouseEvent
2. The three elements were acting together and exchanging their classes at once, rather than separately.
3. isThisTheRightAnswer was returning as false, and I couldn’t figure out how to make it to return true.

Again, forgive me for my ignorance and lack of practice, I would really like to know how I can work more my logical reasoning to improve my code in the future, and I, a beginner in programming, count on your help to help me in this.

Answer 1

The common parts are:

• Always replace the three elements:
• The "featured" element is the class "xxx-div-js" and the other "xxx-js-no-display"

Therefore, you need to pass a parameter that determines whether it is "left", "center" or "right".

Could do so:

handleAnswer(rightOne) {
    var leftSufix = rightOne == "left" ? "" : "-no-display";
    var centerSufix = rightOne == "center" ? "" : "-no-display";
    var rightSufix = rightOne == "right" ? "" : "-no-display";

    $leftDiv.classList.replace('leftside-div', 'leftside-div-js'+leftSufix);
    $centerDiv.classList.replace('centerside-div', 'centerside-div-js'+centerSufix);
    $rightDiv.classList.replace('rightside-div', 'rightside-div-js'+rightSufix);
}

And use like this for example: handleAnswer('left');

It could also in place of changing only the Sufix, for the whole name of the class, but idea would be the same

Another possibility would be to change all to "xxx-div-js-no-display", and with a switch change only what comes in the "rightOne" parameter to "xxx-div-js", but this would make more sense if it had several options, for example a 10.