<!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 btn_chicken_add = document.querySelector("#zjtaishaola")
            var btn_chicken_dec = document.querySelector("#zjtaiduola")
            var btn_cola_add = document.querySelector("#kltaishaola")
            var btn_cola_dec = document.querySelector("#kltaiduola")
            
            // 两个数量
            var chicken_num = document.querySelector("#zjsl")
            var cola_num = document.querySelector("#klsl")
            
            // 计算总价
            var sum = document.querySelector("#total")
            function render() {
                var res = 0
                let t1 = 28 * chicken_num.innerHTML
                let t2 = 5 * cola_num.innerHTML
                res = t1 + t2
                sum.innerHTML = res
            }
            
            // 点击事件
            btn_chicken_add.onclick = function() {
                chicken_num.innerHTML = parseInt(chicken_num.innerHTML) + 1
                render()
            }
            btn_chicken_dec.onclick = function() {
                if(chicken_num.innerHTML > 0)
                    chicken_num.innerHTML = parseInt(chicken_num.innerHTML) - 1
                render()
            }
            btn_cola_add.onclick = function() {
                cola_num.innerHTML = parseInt(cola_num.innerHTML) + 1
                render()
            }
            btn_cola_dec.onclick = function() {
                if(cola_num.innerHTML > 0)
                    cola_num.innerHTML = parseInt(cola_num.innerHTML) - 1
                render()
            }
            
            
        </script>
    </body>
</html>