Как сделать рефакторинг кода?

Question

[Merrii]

Помогите сделать рефакторинг такого кода. Хочу как-то собрать это в одну функцию и задавать параметры. Но не знаю как передать имя переменной. Или можно как-то иначе сократить это?

let linServPrice, cleanServPrice;

if (document.querySelector('input[name="Linen_Service"]')){
    let linServRadio = document.querySelectorAll('input[name="Linen_Service"]');
    for (let i = 0; i < linServRadio.length; i++){
        linServRadio[i].addEventListener('change', function () {
            if (this.value === 'Yes') {
                linServPrice = parseInt(document.querySelector('input[name="linen_price"]').getAttribute("data-price"));
            } else if (this.value === 'No'){               
                linServPrice = 0;
            }
             renewDatas();
        })
    }
}

if (document.querySelector('input[name="Cleaning_Service"]')) {
    let cleanServRadio = document.querySelectorAll('input[name="Cleaning_Service"]');
    for (let i = 0; i < cleanServRadio.length; i++) {
        cleanServRadio[i].addEventListener('change', function () {
            if (this.value === 'Yes') {
                cleanServPrice = parseInt(document.querySelector('input[name="cleaning_price"]' ).getAttribute("data-price"));
            } else if (this.value === 'No') {                
                cleanServPrice = 0;
            } 
            renewDatas();
        })
    }
}

Answer 1

[Антон Швец]

боле менее пристойный js пишется так

const servPrice = {
  lin: 0,
  clean: 0,
};

/**
 * @param {HTMLInputElement[]} elements 
 * @param {HTMLInputElement} valueElement
 * @param {{lin: number; clean: number}} servPrice
 * @param {'lin'|'clean'} propName
 * @param {Function} done
 */
function act(elements, valueElement, servPrice, propName, done) {
  if (elements.length === 0) {
    return;
  }

  elements.forEach((element) => {
    element.addEventListener('change', () => {
      switch (element.value) {
        case 'Yes':
          servPrice[propName] = parseInt(valueElement.getAttribute("data-price"), 10);
          break;
        case 'No':
          servPrice[propName] = 0;
          break;
        default:
      }
      done();
    });
  });
}

act(
  [...document.querySelectorAll('input[name="Linen_Service"]')],
  document.querySelector('input[name="linen_price"]'),
  servPrice,
  'lin',
  renewDatas,
);

act(
  [...document.querySelectorAll('input[name="Cleaning_Service"]')],
  document.querySelector('input[name="cleaning_price"]'),
  servPrice,
  'clean',
  renewDatas,
);

только конечно дать функции act более понятное название и описать что делает в комменте
Плюс передачу более трех параметров в функцию лучше делать с помощью объекта и использовать деструктуризацию.

Answer 2

[Виктор Л]

ну если так

let linServPrice = getValue("Linen_Service","linen_price"),
let cleanServPrice =getValue("Cleaning_Service","cleaning_price");

function getValue(Service,price){
if (document.querySelector(`input[name=${Service}]`)){
...
}
}