我无法重构我的代码以实现可重用性

Question

I want to extract the call back function into a separate function so I can reuse it without typing manually wherever I need to use it but am unable to achieve the desired result. pls I need help am just new to javascript. Below is my my attempt and the main code.

const nav = document.querySelector('.nav');
const registerSection = document.querySelector('.register-section');
const loginSection = document.querySelector('.login-section');
const aboutUsSection = document.querySelector('.about-us-section');

const showForm = function (e, cl) {
  if (!e.target.classList.contains(`${cl}`)) return;

  loginSection.classList.add('hide-section');
  aboutUsSection.classList.add('hide-section');
  registerSection.classList.remove('hide-section');
};

nav.addEventListener('click', showForm.bind('list-link-register'));
nav.addEventListener('click', showForm.bind('list-link-login'));


// This is the code I wanted to refactor

nav.addEventListener('click', function (e) {
  if (!e.target.classList.contains('list-link-register')) return;

  loginSection.classList.add('hide-section');
  aboutUsSection.classList.add('hide-section');
  registerSection.classList.remove('hide-section');
});

nav.addEventListener('click', function (e) {
  if (!e.target.classList.contains('list-link-login')) return;

  aboutUsSection.classList.add('hide-section');
  registerSection.classList.add('hide-section');
  loginSection.classList.remove('hide-section');
});

Answer 1

Since you already have an if statement you could put both cases in the same function

nav.addEventListener('click', function (e) {

  if (e.target.classList.contains('list-link-register')){
      aboutUsSection.classList.add('hide-section');
      registerSection.classList.add('hide-section');
      loginSection.classList.remove('hide-section');
  }

  if (e.target.classList.contains('list-link-login')) {
      loginSection.classList.add('hide-section');
      aboutUsSection.classList.add('hide-section');
      registerSection.classList.remove('hide-section');
  }
});