MENU

js、jQueryで入力の都度、自動計算する

2023-09-08

目次

js、jQueryで入力の都度、自動計算

結果

テキスト入力欄に数値が入力される都度、計算した結果を表示します。

HTML、js、jQuery

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/jquery-3.7.0.min.js"></script>
    <title>Document</title>
</head>
<script>
    $(function(){
        // inputタグのidがinput_1とinput_2が変化するたびにfunction内の処理を実行
        $("#input_1, #input_2").bind("input", function(){
            var input_1 = $("#input_1").val();             // idがinput_1の値を取得し変数へ格納
            var input_2 = $("#input_2").val();             // idがinput_2の値を取得し変数へ格納
            if(!isNaN(input_1) && !isNaN(input_2)){        // input_1とinput_2の値が数値の場合
                sum = Number(input_1) + Number(input_2);   // 明示的に数値にし合計する
                $("#sum").val(sum);                        // idがsumの値に合計値をセットする
            }
        });
    });
</script>
<body>
    <form action="" method="">
        自動計算：
        <input type="text" value="" size="5" id="input_1">＋
        <input type="text" value="" size="5" id="input_2">＝
        <input type="text" value="" size="5" id="sum" disabled>
    </form>
</body>
</html>

URLをコピーしました！