题解 | #购物面板#

购物面板

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>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 zjtaiduo=document.querySelector('#zjtaiduola')
            var kltaiduo=document.querySelector('#kltaiduola')
            var zjspan=document.querySelector('#zjsl')
            var klspan=document.querySelector('#klsl')
            var zjtaishao=document.querySelector('#zjtaishaola')
            var kltaishao=document.querySelector('#kltaishaola')
            var total=document.querySelector('#total')
            let total_zj=0
            let total_kl=0
            var total_price=0
            zjtaiduo.onclick=function(){
               if(total_zj>0){
                   total_zj--
               }
                this.zjspan.innerText=total_zj
                total.innerText=total_zj*28+total_kl*5   
            }
            zjtaishao.onclick=function(){
                total_zj++
                zjspan.innerText=total_zj
                total.innerText=total_zj*28+total_kl*5
                
            }
            kltaiduo.onclick=function(){
               if(total_kl>0){
                   total_kl--
               }
               klspan.innerText=total_kl
                total.innerText=total_zj*28+total_kl*5
                
            }
            kltaishao.onclick=function(){
                total_kl++
                zjspan.innerText=total_kl
                total.innerText=total_zj*28+total_kl*5 
            }
            
        </script>
    </body>
</html>