JSFiddle - React, Tailwind, and code Playground

by styaue

HTML

<main>
        <form action="" id="countForm">
            <div class="qq">
                <label for="aa">A</label>
                <input type="number" name="num[]" id="aa" class="number" min="0">
            </div>
            <div class="qq">
                <label for="bb">B</label>
                <input type="number" name="num[]" id="bb" class="number" min="0">
            </div>
            <div class="qq">
                <label for="cc">C</label>
                <input type="number" name="num[]" id="cc" class="number" min="0">
            </div>
            <div class="qq">
                <label for="dd">D</label>
                <input type="number" name="num[]" id="dd" class="number" min="0">
            </div>
            <div class="qq">
                <label for="ee">E</label>
                <input type="number" name="num[]" id="ee" class="number" min="0">
            </div>
            <div class="qq">
                <div class="btn reset_btn">重填</div>
                <div class="btn submit_btn">送出</div><br><br>
                <div class="total"></div>
            </div>
        </form>
    </main>

SCSS

.qq {
    margin: 20px;
}
.btn {
    padding: 5px 15px;
    margin: 0px 10px;
    font-size: 13px;
    display: inline-block;
    background: #000;
    color: #fff;
    &:hover {
        color: yellow;
    }
}

JavaScript

$('.reset_btn').on('click',function(){
        document.getElementById("countForm").reset();
    });
    $('.submit_btn').on('click',function(){
        var _cost = [];  // 存每種書打完折的金額
        var _price = 100; // 每本書多少錢
        $("input[name='num[]']").each(function(i){
            var _num = $(this).val(); // 每種書的數量，取得value要轉成數字型態
            if(_num == '') {
                _num = 0;
            }
            _num = parseInt(_num);

            if(_num >= 4){
                _cost[i] = (_num * _price) * 0.7;
            } else if (_num == 3) {
                _cost[i] = (_num * _price) * 0.8;
            } else if (_num == 2) {
                _cost[i] = (_num * _price) * 0.9;
            } else {
                _cost[i] = _num * _price;
            }
        });
        // console.log(_cost);
        var sum = 0;
        for (var k = 0; k < _cost.length; k++) {
            sum += _cost[k];
        };
        // console.log('totle:'+sum);
        $('.total').text('總金額：'+sum);
    });