見出し画像

JavaScriptで割り勘。

donguri

良い参考サイトがあったのでこれをシンプルのしてみます。(計算に必要のないCSSは使わないこととします)

HTLMをそのまま表示

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>割り勘電卓</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="calculator">
        <h1>割り勘電卓</h1>
        <div class="input-section">
            <label for="totalAmount">合計金額:</label>
            <input type="number" id="totalAmount" placeholder="5000">
            <br>
            <label for="peopleCount">人数:</label>
            <input type="number" id="peopleCount" placeholder="3">
        </div>
        <button class="calculate-btn" onclick="calculateSplit()">計算する</button>
        <div class="result-section">
            <h2 id="result">1人あたりの金額: ¥0</h2>
            <h3 id="remainder">余りの金額: ¥0</h3>
            <h3 id="individualPayments"></h3>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

仕組みとしては

    <div class="input-section">
            <label for="totalAmount">合計金額:</label>
            <input type="number" id="totalAmount" placeholder="5000">
            <br>
            <label for="peopleCount">人数:</label>
            <input type="number" id="peopleCount" placeholder="3">
   </div>

この部分で必要な数字を入力できるようにしています。入力部分は

<input type="number" id="totalAmount" placeholder="5000">
<input type="number" id="peopleCount" placeholder="3">

これで数字を受け取り、

  <button class="calculate-btn" onclick="calculateSplit()">計算する</button>

で計算するボタンを作ります。このボタンを押すとJavaScriptが動くようにします。

calculateSplit()関数の中身は

 const totalAmount = parseFloat(document.getElementById('totalAmount').value);
 const peopleCount = parseInt(document.getElementById('peopleCount').value);

入力を受けて変数に代入します。

   if (isNaN(totalAmount) || isNaN(peopleCount) || peopleCount <= 0 || totalAmount <= 0) {
        document.getElementById('result').innerText = '正しい金額と人数を入力してください。';
        document.getElementById('remainder').innerText = '';
        document.getElementById('individualPayments').innerText = '';
        return;
    }

入力がない、"0"が入力されてボタンが押された場合にコメントが出ます。

 const baseAmount = Math.floor(totalAmount / peopleCount);
 const remainder = totalAmount % peopleCount;

割り勘する基本となる数字を計算。baseAmountで余りのない数字(割り切れる数字)。remainderで余り、足りない分を出しています。

そして以下で支払額を決めていきます。

let payments = [];
for (let i = 0; i < peopleCount; i++) {
        if (i < remainder) {
            payments.push(baseAmount + 1); // 余りをカバー
        } else {
            payments.push(baseAmount); // 基本金額
        }
  }

let payments = [];

割り切れない分については余りの数字だけ"+1"した金額を配列に追加していき、それ以外は割り切れた金額をpayments配列に入れていきます。

あとは表示させる部分を作ってあります。

HTMLのidと紐付け。

document.getElementById('result').innerText = `1人あたりの金額: ¥${baseAmount}`;
document.getElementById('remainder').innerText = `余りの金額: ¥${remainder}`;

そしてこれに表示させる命令

 let paymentDetails = "各人の支払い金額: ";
    for (let i = 0; i < payments.length; i++) {
        paymentDetails += `\n${i + 1}人目: ¥${payments[i]}`;
    }
    document.getElementById('individualPayments').innerText = paymentDetails;
}

連続処理でpayments配列に入った金額をpaymentDetailsで定義してある文章に結合(+=) させて表示させています。

最後にHTMLの表示部分と紐付けています。

 document.getElementById('individualPayments').innerText = paymentDetails;


全体のJavaScriptのコード

function calculateSplit() {
    const totalAmount = parseFloat(document.getElementById('totalAmount').value);
    const peopleCount = parseInt(document.getElementById('peopleCount').value);

    if (isNaN(totalAmount) || isNaN(peopleCount) || peopleCount <= 0 || totalAmount <= 0) {
        document.getElementById('result').innerText = '正しい金額と人数を入力してください。';
        document.getElementById('remainder').innerText = '';
        document.getElementById('individualPayments').innerText = '';
        return;
    }

    // 1人あたりの金額を計算（切り捨て）
    const baseAmount = Math.floor(totalAmount / peopleCount);
    const remainder = totalAmount % peopleCount;

    // 余りをカバーする人数を決定（上位の人が1円多く支払う）
    let payments = [];
    for (let i = 0; i < peopleCount; i++) {
        if (i < remainder) {
            payments.push(baseAmount + 1); // 余りをカバー
        } else {
            payments.push(baseAmount); // 基本金額
        }
    }

    // 結果を表示
    document.getElementById('result').innerText = `1人あたりの金額: ¥${baseAmount}`;
    document.getElementById('remainder').innerText = `余りの金額: ¥${remainder}`;
    
    // 各人の支払い金額をリスト表示
    let paymentDetails = "各人の支払い金額: ";
    for (let i = 0; i < payments.length; i++) {
        paymentDetails += `\n${i + 1}人目: ¥${payments[i]}`;
    }
    document.getElementById('individualPayments').innerText = paymentDetails;
}



この記事が気に入ったらサポートをしてみませんか？