Задача №2

Дано 5 елементів input. При введенні значення у якийсь із них необхідно автоматично заповнювати інші (усі попередні у спадному порядку (кожен попередній має значення на 1 менше за наступний)), усі наступні на 1 більше (кожен наступне на 1 більше за попереднього).

Рішення:

'use strict'

/**
 * @param {Event} e
 */
function handleInputCascade({target, currentTarget}) {
  if (!(target instanceof HTMLInputElement)) return

  const targetValue = parseFloat(target.value)

  if (!isFinite(targetValue)) return

  /** @type {NodeListOf<HTMLInputElement>} */
  const relativeInputs = currentTarget.querySelectorAll('input')
  const targetIndex = [].indexOf.call(relativeInputs, target)

  // update previous
  let previousValue = targetValue

  for (let i = targetIndex - 1; i >= 0; i--) {
    relativeInputs[i].value = String(--previousValue)
  }

  // update next
  let nextValue = targetValue

  for (let i = targetIndex + 1; i < relativeInputs.length; i++) {
    relativeInputs[i].value = String(++nextValue)
  }
}

const formEl = document.querySelector('.js-form')

formEl?.addEventListener('input', handleInputCascade)