LoginSignup
quint555
@quint555

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

JavaScript(数値計算して3桁区切り)

解決したいこと

給与計算ツールを作成しております。
給与詳細を入力すると合計値が変動し、3桁区切りで表示できるようにしたいです。
現状給与詳細カラムの4桁目を入力するとエラーとなってしまいNaNが出る状況です。
教えていただきたいです。

発生している問題・エラー

NaN

または、問題・エラーが起きている画像をここにドラッグアンドドロップ

### 該当するソースコード
<script>
const calc = ()=>{
    const input1 = document.querySelector("input[name=basic]");
    const input2 = document.querySelector("input[name=overtime]");
    const input3 = document.querySelector("input[name=position]");
    const input4 = document.querySelector("input[name=family]");
    const input5 = document.querySelector("input[name=adjust]");
    const input6 = document.querySelector("input[name=commission]");
    const input7 = document.querySelector("input[name=hourly]");
    const result = document.querySelector("input[name=salary]");

    result.value = (Number(input1.value) + Number(input2.value) + Number(input3.value) + Number(input4.value) + Number(input5.value) + Number(input6.value) + Number(input7.value));
  
}
</script>

自分で試したこと

ここに問題・エラーに対して試したことを記載してください。

0

2Answer

Javascript(正確にはECMAScriptか?)に組み込みで国際化APIが用意されています。
その中のIntl.NumberFormatというのがあり、Intl.NumberFormatで整形方法を決め、formatメソッドで実行できます。
整形方法として3桁区切りや、他に通貨記号を出したりとかもできます。

以下のドキュメントに使い方やサンプルが記載されているのでいろいろ触ってみてください。

0Like

Comments

  1. @quint555

    Questioner

    ありがとうございます。
    確認してみます!

現状給与詳細カラムの4桁目を入力するとエラーとなってしまいNaNが出る状況です。

「4桁目を入力」する、例えばユーザーがテキストボックスに 1234 と入力すると、JavaScript で 1,234 に書き換えられ、それを使って、

result.value = (Number(input1.value) + Number(input2.value) + 
                Number(input3.value) + Number(input4.value) + 
                Number(input5.value) + Number(input6.value) + 
                Number(input7.value));  

とするからエラーになると言ってますか? であれば、計算する前に、JavaScript でカンマを削除してはいかがですか。

0Like

Comments

  1. @quint555

    Questioner

    はい、そうなんです。
    修正してみます!

Your answer might help someone💌