Как сократить и сделать лаконичнее код

Question

Есть форма регистрации на сайте, каждая верно ввседенная операция разблокирует поле для следующего ввода, в одном моменте получисля не оч понятный код, не могу придумать, как его оптимизировать и сделать более читаемым, буду благодарен за помощь

confirmPassword.oninput = function(event) {
  event.target.style.color =(event.target.value === password.value)?'#090':'#f00'
    avatar.disabled = button.disabled
      if(button.disabled = !(event.target.value === password.value)){
        button.style['background-color'] = '0f0'
      }

Answer 1

confirmPassword.oninput = ({ target }) => {
  const isError = target.value !== password.value;
  target.style.color = isError ? '#f00': '#090';
  avatar.disabled = isError;
  button.disabled = isError;
  button.style.backgroundColor = isError ? '#0f0' : '';
};

Но лучше стили хранить в CSS отдельно, а в JS просто переключать class

Answer 2

confirmPassword.oninput = function ({ target }) {
  avatar.disabled = button.disabled;
  [target.style.color, button.disabled] = (target.value === password.value)
      ? ['#090', false]
      : ['#f00', ((button.style.backgroundColor = '#0f0'), true)]
  // ...
}

Может кому-то понравиться вариант из коммента от @Grundy

confirmPassword.oninput = function ({ target }) {
  avatar.disabled = button.disabled;
  [
    target.style.color, 
    button.disabled, 
    button.style.backgroundColor
  ] = (target.value === password.value)
      ? ['#090', false, button.style.backgroundColor]
      : ['#f00', true, '#0f0']
  // ...
}

... более читабелен, но использует ненужное САМОприсваивание.

БЛОГ НА HUSL

Как сократить и сделать лаконичнее код

Ответы (2 шт):