ベンドマシン送金と返却機能(正規表現、入力制限)

⑴機能：送金と返還

今、お金を入れたら、コーラが飲める折り曲げ機を作ります.
最初にやるべき機能は送金と返却機能です.
送金額を入力して送金ボタンを押すと、持っている金額は送金額と同じように減少します.
戻ってきたボタンを押すと、戻ってきたお金が返ってきて、所持金が増える.

カンマの追加と削除

まず正規表現を使う
所持金と預金額をもらうときは、カンマを外します.
携帯金と送金額を画面に出力すると、カンマが追加されます.

//콤마 제거
function rmComma(str) {
  str = String(str);
  return str.replace(/[^\d]+/g, "");
}
//콤마 추가
function addComma(num) {
  num = String(num);
  return num.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, "$1,");
}

//변수 : 소지금 콤마제거해서 가져오기
let cash = +rmComma(cashStr.innerText);

//기능 : 화면에 입금액, 소지금 출력
function doPrint() {
  balanceStr.innerText = `${addComma(sumDeposit)}원`;
  cashStr.innerText = `${addComma(cash)}원`;
  inpDeposit.value = "";
}

送金入力値の反映/反映なし

入力値が反映されていません

預金額を入力して預金額を反映する機能を実現します.
この場合,反映されていない状況の数を考慮する.
最初の保有金を超えた場合
2文字目の入力時
3番目の負の値を入力した場合
4番目の0元またはボタンを入力しない場合、入力内容を反映しないようにif文を書きます.

if (+inpDeposit.value > cash) {
    return alert("소지금을 초과하였습니다.");
  } else if (isNaN(inpDeposit.value)) {
    return alert("숫자를 입력하세요.");
  } else if (+inpDeposit.value < 0) {
    return alert("마이너스로 시작하는 금액은 없습니다.");
  } else if (inpDeposit.value == 0) {
    return alert("값을 입력하세요");
  }

入力値の反映

ユーザーが正しい値を入力した場合は、入力値を反映する必要があります.
送金額に入力値を加算し、保有金に入力値を減算します.
画面に値を反映します.

function doDeposit() {
...
sumDeposit += +inpDeposit.value;
cash -= +inpDeposit.value;
doPrint()
}

function doPrint() {
  balanceStr.innerText = `${addComma(sumDeposit)}원`;
  cashStr.innerText = `${addComma(cash)}원`;
  inpDeposit.value = "";
}

返却する

今すぐ戻るボタンを押すだけで
預金額を保有資金に追加し、預金額を初期化し、
画面に反映する機能が実装されます.

btnRefund.addEventListener("click", function () {
  cash += sumDeposit;
  sumDeposit = 0;
  doPrint();
});

Target.addEventListener(type, listener)メソッドは、指定されたイベントがターゲットに送信されるたびに呼び出される関数を設定します.typeにおいて、例えば、ボタンを押したときに、ポインティングデバイスがランプに移動したときなど、異なるイベントタイプを設定することができる.その後、listenerは、イベント発生時に通知を受け取り、JavaScript機能を実装するオブジェクトを含む.(出典:mdn)
ここで、戻りボタンをクリックする際に戻り機能を実行する必要があるので、typeにclick、listenerに戻り機能を実行する関数を追加しました.

📸 機能実装画面:無効な入力が反映されていません

📸 機能実装画面：送金と返却