<!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">
            // 补全代码
            bindEvent()
            function bindEvent() {
                 zjtaiduola.onclick = function() {
                    let zjNum = zjsl.innerText
                    if (zjNum > 0) {
                        zjsl.innerText = --zjNum
                        total.innerText = getTotal(zjNum, klsl.innerText, 28, 5)
                    }
                    
                }
                zjtaishaola.onclick = function () {
                    let zjNum = zjsl.innerText
                    zjsl.innerText = ++zjNum
                    total.innerText = getTotal(zjNum, klsl.innerText, 28, 5)
                }
                
                // 可乐
                kltaiduola.onclick = function() {
                    let klNum = klsl.innerText
                    if (klNum > 0) {
                        klsl.innerText = --klNum
                        total.innerText = getTotal(zjsl.innerText, klNum, 28, 5)
                    }
                }
                kltaishaola.onclick = function () {
                    let klNum = klsl.innerText
                    klsl.innerText = ++klNum
                    total.innerText = getTotal(zjsl.innerText, klNum, 28, 5)
                }
            }
            
            /**
            zjsj 炸鸡数量
            klsl 可乐数量
            zjdj 炸鸡单价 默认28
            kldj 可乐单价 默认5
            */
            function getTotal(zjsl, klsl, zjdj = 28, kldj = 5) {
                return zjsl * zjdj + klsl * kldj
            }
            
            
        </script>
    </body>
</html>