<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8>
</head>

<body>
    <table>
        <thead>
            <caption>
                商品
            </caption>
        </thead>
        <tbody>
            <tr>
                <td>炸鸡</td>
                <td>28元</td>
                <td><button id="zjtaiduola">-</button></td>
                <td><span id="zjsl">0</span></td>
                <td><button id="zjtaishaola">+</button></td>
            </tr>
            <tr>
                <td>可乐</td>
                <td>5元</td>
                <td><button id="kltaiduola">-</button></td>
                <td><span id="klsl">0</span></td>
                <td><button id="kltaishaola">+</button></td>
            </tr>
            <tr>
                <td>总价：</td>
                <td><span id="total">0</span></td>
            </tr>
        </tbody>
    </table>

    <script type="text/javascript">
        // 补全代码
        var zjSubBtn = document.getElementById('zjtaiduola');
        var zjAddBtn = document.getElementById('zjtaishaola');
        var klSubBtn = document.getElementById('kltaiduola');
        var klAddBtn = document.getElementById('kltaishaola');
        var zj = document.getElementById('zjsl');
        var kl = document.getElementById('klsl');

        var total = document.getElementById('total');
        var td = document.querySelectorAll('td');
        // 炸鸡、可乐的价钱
        var zjPrice = parseInt(td[1].innerText);
        var klPrice = parseInt(td[6].innerText);

        var zjNum = zj.innerText;
        var klNum = kl.innerText;
        var totalPrice = total.innerText;


        zjSubBtn.onclick = function () {
            cal('zj', 'sub')

        }
        zjAddBtn.onclick = function () {
            cal('zj', 'add')
        }
        klSubBtn.onclick = function () {
            cal('kl', 'sub')

        }
        klAddBtn.onclick = function () {
            cal('kl', 'add')
        }
        // pro 是商品，op是操作符 sub 或 add
        function cal(pro, op) {
            if (pro == 'zj') {
                if (op == 'sub') {
                    if (zjNum == 0) return;
                    zjNum--;
                }
                else {
                    zjNum++;
                }
                // 渲染
                zj.innerText = zjNum;
                totalPrice = zjPrice * zjNum + klPrice * klNum;
                total.innerHTML = totalPrice;
            }
            if (pro == 'kl') {
                if (op == 'sub') {
                    if (klNum == 0) return;
                    klNum--;
                }
                else {
                    klNum++;
                }
                // 渲染
                kl.innerText = klNum;
                totalPrice = zjPrice * zjNum + klPrice * klNum;
                total.innerHTML = totalPrice;
            }
        }

    </script>
</body>

</html>