JSFiddle - React, Tailwind, and code Playground

by jrm2k6

HTML

<form method="post">
        small bottles
        <input type="text" id="the_input_id">
        medium bottles
        <input type="text" id="the_input_id1">
        Large bottles
        <input type="text" id="the_input_id2">
        <input type="text" id="total1">
    </form>



    <div id="total">
    total:
    </div>

JavaScript

$('#the_input_id').keyup(function() {
        updateTotal();
    });

    $('#the_input_id1').keyup(function() {
        updateTotal();
    });

    $('#the_input_id2').keyup(function() {
        updateTotal();
    });

    var updateTotal = function() {
        var input1 = parseInt($('#the_input_id').val());
        var input2 = parseInt($('#the_input_id1').val());
        var input3 = parseInt($('#the_input_id2').val());
        if (isNaN(input1) || isNaN(input2) || isNaN(input3)) {
            $('#total').text('');
        } else {
            var max = 500;
            var total = input1 + (input2 * 2) + (input3 * 3);

            if (total > max) {
                $('#total').text('The maximum is ' + max);
                $('#total1').val(500);
            } else {
                $('#total').text(total);
                $('#total1').val(total);
            }
            


        }
        return true;
    };