题解 | #购物面板#

购物面板

https://www.nowcoder.com/practice/1448469386f746f5941db2712372f373

武呀呀呀

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	<table>
            <thead>
                <caption>
                    商品
                </caption>
            </thead>
            <tbody>
                <tr>
                    <td>炸鸡</td>
                    <td id = "zjPrice">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 id = "klPrice">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 zjPrice = document.getElementById('zjPrice')
            var klPrice = document.getElementById('klPrice')
            // 炸鸡数量
            var zjsl = document.getElementById('zjsl')
            // 可乐数量
            var klsl = document.getElementById('klsl')
            //总价
            var total = document.getElementById('total')
            // 炸鸡减少
            var zjjian = document.getElementById('zjtaiduola')
            // 炸鸡增加
            var zjjia = document.getElementById('zjtaishaola')
            // 可乐减少
            var kljian = document.getElementById('kltaiduola')
            // 可乐增加
            var kljia = document.getElementById('kltaishaola')
            // 补全代码
            // 炸鸡减少
            var zj = 0
            zjjian.onclick = function () {
                zj --
                if(zj <= 0){
                    zj = 0
                }
                zjsl.innerHTML = zj
                zjPrice.innerHTML = zj*28 +'元'
                total.innerHTML = zj*28 + kl*5
            }
            // 炸鸡增加
            zjjia.onclick = function () {
                zj ++
                zjsl.innerHTML = zj
                zjPrice.innerHTML = zj*28 +'元'
                total.innerHTML = zj*28 + kl*5
            }
            // 可乐减少
            var kl = 0
            kljian.onclick = function () {
                kl --
                if(kl <= 0){
                    kl = 0
                }
                klsl.innerHTML = kl
                klPrice.innerHTML = kl*5 +'元'
                total.innerHTML = zj*28 + kl*5
            }
            // 可乐增加
            kljia.onclick = function () {
                kl ++
                klsl.innerHTML = kl
                klPrice.innerHTML = kl*5 +'元'
                total.innerHTML = zj*28 + kl*5
            }
        </script>
    </body>
</html>