特定の倍数に数値をまとめたい。

なにをいっているのだろうと思われたかもしれないので、実例をどうぞ。

実例

ユーザーが数値を入れるインプットエリアがあるとする。

ユーザーは任意の数字を入れることができる。

その結果を10の倍数にまとめたい。

つまり、24とユーザーが記入した場合は「20」が期待値になる。

ということがやりたい。

実装方法

じゃ、どうするのか。

まずは実装済みのものをどうぞ↓(うまくコンパイルできない時があるので、下の更新ボタンをクリックしてください)

inputエリアに数字を入れていくと、5で10、14で10、15で20になっていることが確認できる。

つまり24と入力すれば「20」が表示される、期待値通り。

特定の倍数に数値をまとめるコード

const changeNumber = () => {
  const unit = 10;
  const el = Math.round(num.value);
  result.value = Math.round(el / unit) * unit;
};

inputエリアのvalueが更新された時、

まずはvalueを丸める。

つまり、2は0、5は10になる。

その値を最初に定義した値(丸めたい倍数)で計算する。

実際に24が入力された時、

24を丸めて20にする。

その値を10で割って10でかける。

20 / 10 * 10 = 20

結果20になる。

なんかこうやってみるともっと簡単な方法がある?

まあ、期待値は取り出せたので、良しとする。

理系の人、ぜひ教えてください。