JavaSprictで入力フォームに入力した値を自動計算して表示させたい

Question

入力フォームに数値を入力したものを三桁でカンマ区切り、全角数値を半角に変換、入力した値同士で足し算した合計のものを表示、数値以外は表示させないことを実装したいのですが、合計金額の表示が上手くいきません。三桁までの数字は上手く足されるのでカンマ区切りの処理が邪魔をしているみたいです……

  //数値を入力するフォーム
　<input class="money1 js-money" style="width:100%; box-sizing:border-box" name="money1">
　<input class="money2 js-money" style="width:100%; box-sizing:border-box" name="money2">
　<input class="money3 js-money" style="width:100%; box-sizing:border-box" name="money3">
  
  //合計金額を表示させる場所
  <span class="total-money"></span>

//文字列にカンマを追加
function addComma(val) {
    return val.replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
}

//文字列からカンマを除去
function deleteComma(val) {
    return val.replace(/,/g, '');
}

document.addEventListener( 'DOMContentLoaded', () => {
    document.querySelectorAll('.js-money').forEach((el) => {

    /*****  フォームに入力された数値を集計し、表示する *****/
        el.addEventListener('change', (e) => {

            /*****  フォームがフォーカスされた時にカンマを除去 *****/
            el.addEventListener('focus', (e) => {
                const val = e.target.value;
                e.target.value = deleteComma(val);
            });

            /*****  フォームからフォーカスが外れた時にカンマを表示 *****/
            el.addEventListener('blur', (e) => {
                const val = e.target.value;
                e.target.value = addComma(val);0
            });

            //0以上の整数、半角と全角の数字以外が入力されたら、フォームを初期化する
            let inputVal = e.target.value;
            const pattern = /^([0-9０-９]*|0)$/;
            if(!pattern.test(inputVal)){
                e.target.value = "";
                inputVal = "";
            }

            //全角数字を半角数字に変換
            e.target.value = inputVal.replace(/[０-９]/g,(s) => {
                return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
            });

            //合計金額の表示
            let money1 = 0;
            if(document.querySelector('.money1').value){
              money1 = parseInt(document.querySelector('.money1').value);
            }
            let money2 = 0;
            if(document.querySelector('.money2').value){
              money2 = parseInt(document.querySelector('.money2').value);
            }
            let money3 = 0;
            if(document.querySelector('.money3').value){
              money3 = parseInt(document.querySelector('.money3').value);
            }

            let totle = money1 + money2 + money3;

            let money_sum = document.querySelector('.total-money');
            money_sum.innerHTML = totle +"円";

        });

    });

});

上記のフォームに入力を行うと三桁のカンマ区切り、数値以外は入力しない、全角数値を半角に変換は上手くいきます。
spanタグに合計数値を表示するときに三桁以上入力すると変な表示になってしまいます。

入力例：
inputタグのclass="money1”～class="money3"に11,111と入力すると合計が表示されるspanタグ部分には11133と表示されてしまいます。
また、let totle = money1 + money2 + money3;時点でconsole.log(totle)とするとspanタグ表示される変な値と同じ表示になります。

console.logにて値がおかしくなる所を探したところ次のようなことが判明しました。
↓↓↓
class="money1"に11111を入力→console.log(money1)でコンソールに11111と表示。
続けてclass="money2"に11111を入力→console.log(money1)でコンソールに11と表示,console.log(money2)でコンソールに11111と表示。
続けてclass="money3"に11111を入力→console.log(money1)でコンソールに11と表示,console.log(money2)でコンソールに11と表示,console.log(money3)でコンソールに11111と表示。

このことからinputに値を入力した時点では数値として代入されるが、
他のinputに値を代入した時(イベント発生時)にはカンマを含むため文字列に反映されるのかなと思います。
試しにcosole.log(parseInt(111,111))とやってみたら111と表示されました。

↓のJSコードを取り除いた状態で入力すると上手くいきます。
ですが、カンマ区切りがなくなります…あちらがたてばこちらが立たず状態です。

//文字列にカンマを追加
function addComma(val) {
    return val.replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
}

//文字列からカンマを除去
function deleteComma(val) {
    return val.replace(/,/g, '');
}

カンマ区切りとしつつ、数値を合計させるいい方法があればご教授いただきたいです。

Comments

[AkitoshiManabe]

> カンマ区切りがなくなります…あちらがたてばこちらが立たず状態
ソースを読むと「入力フィールドにフォーカスしているときはカンマ区切りなし。そうでないときはコンマ区切りで表示」という実装目標が感じられますが、そうであればご質問内に明文化したほうが良いと思います。
※タイトルの「自動計算して表示」だけであれば、回答は出ています。

Answer 1

Jon_doさんのコード内のNumber(money[0].value.replace(/,/g, ""))を参考にコードを修正したら上手くいきました！

//合計金額の表示(編集前)
            let money1 = 0;
            if(document.querySelector('.money1').value){
              money1 = parseInt(document.querySelector('.money1').value);
            }
            let money2 = 0;
            if(document.querySelector('.money2').value){
              money2 = parseInt(document.querySelector('.money2').value);
            }
            let money3 = 0;
            if(document.querySelector('.money3').value){
              money3 = parseInt(document.querySelector('.money3').value);
            }

//合計金額の表示(編集後.replace(/,/g, "")の処理を追加)
            let money1 = 0;
            if(document.querySelector('.money1').value){
              money1 = parseInt(document.querySelector('.money1').value.replace(/,/g, ""));
            }
            let money2 = 0;
            if(document.querySelector('.money2').value){
              money2 = parseInt(document.querySelector('.money2').value.replace(/,/g, ""));
            }
            let money3 = 0;
            if(document.querySelector('.money3').value){
              money3 = parseInt(document.querySelector('.money3').value.replace(/,/g, ""));
            }

Answer 2

いい方法

HTML上に表示する数字（string）と、四則演算等の伴う数値（number）をしっかりと捉えます。
※数値（number） <=> 数字（string） を混同してしまう場合
「混乱を避けるためにユーザ関数でイベントリスナ内のコードを簡素化する」のが良い方法と言えそうです。

• CODEPEN

---

ご質問のコードで気づいた点は、 change イベントのリスナ内で、focus / blur を 繰り返し addEventListener でリスナを多重登録をしている点です。

Answer 3

元のソースを読み解くのは難しそうだったので自作してみました。
参考までにどうぞ。
下記コードはコピペすると動作します。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input class="money1 js-money" style="width:100%; box-sizing:border-box" name="money1" autocomplete="off">
    <input class="money2 js-money" style="width:100%; box-sizing:border-box" name="money2" autocomplete="off">
    <input class="money3 js-money" style="width:100%; box-sizing:border-box" name="money3" autocomplete="off">
    <span class="total-money"></span>
    <script>

        const money = document.getElementsByClassName("js-money");
        const total = document.getElementsByClassName("total-money")[0];

        for (let i = 0; i < 3; i++) {
            money[i].addEventListener("input", () => {
                // 0~9 ０~９以外の入力は受け付けない + 数値をカンマ表記に
                money[i].value = Number(changeHalfWidth(money[i].value.replace(/[^0-9０-９]/g, ""))).toLocaleString();
                // money1 + money2 + money3
                const add = Number(money[0].value.replace(/,/g, "")) + Number(money[1].value.replace(/,/g, "")) + Number(money[2].value.replace(/,/g, ""));
                // totalの数値をカンマ表記にして円を語尾に付加
                total.innerText = add.toLocaleString() + "円";
                // 0のみの場合 何も表示しない
                if (money[i].value === "0") money[i].value = "";
                // 0 円の場合何も表示しない
                if (add === 0) total.innerText = "";
            });
        }

        // 全角数字を半角に
        const changeHalfWidth = (num) => {
            const changeNum = num.replace(/[０-９]/g, (s) => { return String.fromCharCode(s.charCodeAt(0) - 0xFEE0) });
            return changeNum;
        }

    </script>
</body>

</html>

Answer 4

let totle = money1 + money2 + money3;
の段階では、totalは正しい数値となっていますでしょうか？
debugでどのタイミングでおかしくなっているか、確認してみてください。

Comments

[Hogeike]

そういうのは修正依頼に書いた方が良いと思います。回答になっていません