选择相似的DOM元素时如何避免重复代码？

Question

Currently I have the following:

  const mainBannerInfo = document.querySelector('.bigfullbanner').querySelector('.banner-row').querySelector('.info-col');
  const title__MainBanner = mainBannerInfo.querySelector('h4');
  const subtitle__MainBanner = mainBannerInfo.querySelector('p');
  const buttonCTA__MainBanner = mainBannerInfo.getElementsByClassName('button-big-banner');

  let watchMedia = window.matchMedia("( max-width:  1023px )")

  function whiteToBlackInfo__MainBanner() {
    //Changing TITLE text styles
    title__MainBanner.classList.remove('text-white');
    title__MainBanner.classList.add('text-black');
    //Changing SUBTITLE styles
    subtitle__MainBanner.classList.remove('text-white');
    subtitle__MainBanner.classList.add('text-black');
    //Changing CTA Buttons styles
    for(let i = 0; i < buttonCTA__MainBanner.length; i++) {
      buttonCTA__MainBanner[i].classList.remove('text-black');
      buttonCTA__MainBanner[i].classList.add('text-white');
      buttonCTA__MainBanner[i].classList.remove('bg-white');
      buttonCTA__MainBanner[i].classList.add('bg-black');
    }
  }

  function blackToWhiteInfo__MainBanner() {
      //Changing TITLE text styles
      title__MainBanner.classList.remove('text-black');
      title__MainBanner.classList.add('text-white');
      //Changing SUBTITLE styles
      subtitle__MainBanner.classList.remove('text-black');
      subtitle__MainBanner.classList.add('text-white');
      //Changing CTA Buttons styles
      for(let i = 0; i < buttonCTA__MainBanner.length; i++) {
        buttonCTA__MainBanner[i].classList.remove('text-white');
        buttonCTA__MainBanner[i].classList.add('text-black');
        buttonCTA__MainBanner[i].classList.remove('bg-black');
        buttonCTA__MainBanner[i].classList.add('bg-white');
      }
  }

  if(
      mainBannerInfo.classList.contains('bottomright') ||
      mainBannerInfo.classList.contains('bottomleft') ||
      mainBannerInfo.classList.contains('topright') ||
      mainBannerInfo.classList.contains('topleft') ||
      mainBannerInfo.classList.contains('centerInfo') &&
      !mainBannerInfo.classList.contains('keep-color')) {
      
        blackToWhiteInfo__MainBanner();

      if(
        mainBannerInfo.classList.contains('outsideDesktop') &&
        watchMedia.matches == false
      ) {
        whiteToBlackInfo__MainBanner();
      } else if(
        mainBannerInfo.classList.contains('outsideMobile') &&
        watchMedia.matches == true 
      ) {
        whiteToBlackInfo__MainBanner();
      }
  } 
  // -------------------------------------------------

I'm currently working on an CMS and my task is to help the Content responsible person by automating the changes of styles of some banners so he only has to write/remove some classes in the html file. So I created the DOM Selectors and created some functions to achieve this. The thing is I have another banner almost identical:

  const novedadBannerInfo = document.querySelector('.smallfullbanner').querySelector('.banner-row').querySelector('.info-col');
  const title__novedadBanner = novedadBannerInfo.querySelector('h4');
  const subtitle__novedadBanner = novedadBannerInfo.querySelector('p');
  const buttonCTA__novedadBanner = novedadBannerInfo.getElementsByClassName('button-big-banner');

  function whiteToBlackInfo__novedadBanner() {
    //Changing TITLE text styles
    title__novedadBanner.classList.remove('text-white');
    title__novedadBanner.classList.add('text-black');
    //Changing SUBTITLE styles
    subtitle__novedadBanner.classList.remove('text-white');
    subtitle__novedadBanner.classList.add('text-black');
    //Changing CTA Buttons styles
    for(let i = 0; i < buttonCTA__novedadBanner.length; i++) {
      buttonCTA__novedadBanner[i].classList.remove('text-black');
      buttonCTA__novedadBanner[i].classList.add('text-white');
      buttonCTA__novedadBanner[i].classList.remove('bg-white');
      buttonCTA__novedadBanner[i].classList.add('bg-black');
    }
  }

  function blackToWhiteInfo__novedadBanner() {
      //Changing TITLE text styles
      title__novedadBanner.classList.remove('text-black');
      title__novedadBanner.classList.add('text-white');
      //Changing SUBTITLE styles
      subtitle__novedadBanner.classList.remove('text-black');
      subtitle__novedadBanner.classList.add('text-white');
      //Changing CTA Buttons styles
      for(let i = 0; i < buttonCTA__novedadBanner.length; i++) {
        buttonCTA__novedadBanner[i].classList.remove('text-white');
        buttonCTA__novedadBanner[i].classList.add('text-black');
        buttonCTA__novedadBanner[i].classList.remove('bg-black');
        buttonCTA__novedadBanner[i].classList.add('bg-white');
      }
  }

  if(
      novedadBannerInfo.classList.contains('bottomright') ||
      novedadBannerInfo.classList.contains('bottomleft') ||
      novedadBannerInfo.classList.contains('topright') ||
      novedadBannerInfo.classList.contains('topleft') ||
      novedadBannerInfo.classList.contains('centerInfo') &&
      !mainBannerInfo.classList.contains('keep-color')) {
      
        blackToWhiteInfo__novedadBanner();

      if(
        novedadBannerInfo.classList.contains('outsideDesktop') &&
        watchMedia.matches == false
      ) {
        whiteToBlackInfo__novedadBanner();
      } else if(
        novedadBannerInfo.classList.contains('outsideMobile') &&
        watchMedia.matches == true 
      ) {
        whiteToBlackInfo__novedadBanner();
      }
  } 
  // -------------------------------------------------

As you can see it is practically the same but the variables storing the selectors have to change and I have to create all this functions all over again.

Is there any way to shrink this code?

Answer 1

You can create a helper function mainBanner(color1, color2) with two colors as parameters. Inside this function, you can use color1 and color2 to build your classes (like text-white, text-black, ...) dynamically.

See this code:

function mainBanner(color1, color2) {
    //Changing TITLE text styles
    title__MainBanner.classList.remove('text-' + color1);
    title__MainBanner.classList.add('text-' + color2);
    //Changing SUBTITLE styles
    subtitle__MainBanner.classList.remove('text-' + color1);
    subtitle__MainBanner.classList.add('text-' + color2);
    //Changing CTA Buttons styles
    for(let i = 0; i < buttonCTA__MainBanner.length; i++) {
        buttonCTA__MainBanner[i].classList.remove('text-' + color2);
        buttonCTA__MainBanner[i].classList.add('text-' + color1);
        buttonCTA__MainBanner[i].classList.remove('bg-' + color1);
        buttonCTA__MainBanner[i].classList.add('bg-' + color2);
    }
}

function blackToWhiteInfo__MainBanner() {
    mainBanner('black', 'white');
}

function whiteToBlackInfo__MainBanner() {
    mainBanner('white', 'black');
}

If you have more options than the both colors, you can pass an options object to the mainBanner(options) function and implement it like this:

function mainBanner(options) {
    var color1 = options.color1;
    var color2 = options.color2;
    var textClsPrefix = options.textClsPrefix;
    var someOtherProperty = options.someOtherProperty;

    ...
}

// sample call 1
mainBanner({
    color1: "white", 
    color2: "black", 
    textClsPrefix: "text-", 
    someOtherProperty: "some-value"
});

// sample call 2
mainBanner({
    color1: "black", 
    color2: "white", 
    textClsPrefix: "text-light-", 
    someOtherProperty: "some-value-2"
});