JSで進数変換

お手軽な進数変換ツールが無かったので自作しました。
該当の進数に数値を入力すれば、それ以外の進数を自動計算してくれます。例えば、2進数に数値を入力すれば、自動で8、10、16進数に変換して表示されます。
数値を入力するだけで変換してくれるので、簡単です。

<div class="container">
    <p>2進数<input id="binary" type="text" data-base-number="2" oninput="numberInput(this);"></p>
    <p>8進数<input id="octal" type="text" data-base-number="8" oninput="numberInput(this);"></p>
    <p>10進数<input id="decimal" type="text" data-base-number="10" oninput="numberInput(this);"></p>
    <p>16進数<input id="hexadecimal" type="text" data-base-number="16" oninput="numberInput(this);"></p>
</div>

<script>
const binaryId = document.querySelector('#binary')
const octalId = document.querySelector('#octal')
const decimalId = document.querySelector('#decimal')
const hexadecimalId = document.querySelector('#hexadecimal')

function numberInput(input) {
  if (input.value === 'NaN' || input.value === '') {
    input.value = 0
  }

  binaryId.value = parseInt(input.value, input.dataset.baseNumber).toString(2)
  octalId.value = parseInt(input.value, input.dataset.baseNumber).toString(8)
  decimalId.value = parseInt(input.value, input.dataset.baseNumber)
  hexadecimalId.value = parseInt(input.value, input.dataset.baseNumber).toString(16)

  switch (input) {
    case binary:
      input.value = input.value.replace(/[^0-1]/g, '')
      break
    case octal:
      input.value = input.value.replace(/[^0-8]/g, '')
      break
    case decimal:
      input.value = input.value.replace(/[^0-9]/g, '')
      break
    case hexadecimal:
      input.value = input.value.replace(/[^0-9a-fA-F]/g, '')
      break
  }
}
</script>

参考